输入值清除 - React Hooks

Posted 2023-02-25

【中文标题】输入值清除 - React Hooks

【英文标题】：Input value clear - React Hooks

【发布时间】：2020-02-04 06:32:23

【问题描述】：

我正在尝试在单击按钮后清除输入，使用下面的 useRef 是我的代码

点击按钮后我清除了状态和输入值

    const [giftCode, setGiftCode] = useState('');
    const inputGift = useRef(null);
    const clickHandler = () =>
       setGiftCode('');  
       inputGift.current.value = '';
     

                        <TextInput
                            type="text"
                            field="gift-card-code"
                            ref=inputGift
                            autoComplete="off"
                            onChange=event => 
                                setGiftCodeError(false);
                                setGiftBalanceCheck(null);
                                setGiftCode.bind(event.target.value);
                            
                        />

输入值正在清除，但是显示浏览器调试器的状态没有改变，如果我们改变了输入字段那么状态正在改变，useState setGiftcode 没有改变组件的实际状态有没有其他方法可以做到这一点。请参阅下图了解。

【问题讨论】：

可以分享一下点击按钮的代码吗？

【参考方案1】：

为什么不使用 ref.将您的状态分配为输入中的值？

    const [giftCode, setGiftCode] = useState('');
    const clickHandler = () =>
       setGiftCode('');  
     

    ...
        <TextInput
             type="text"
             field="gift-card-code"
             value=giftCode // this
             autoComplete="off"
             onChange=event => 
                    setGiftCodeError(false);
                    setGiftBalanceCheck(null);
                    setGiftCode.bind(event.target.value);
              
         />

【讨论】：

我已经先尝试了上述方法，但这不起作用

如果你也这样做，为什么组件状态在调用 setState 后没有改变，我不明白为什么会发生这种情况！

【参考方案2】：

您只需要定义value 以及提交后要清除的输入字段。

<TextInput
 type="text"
 field="gift-card-code"
 ref=inputGift
 value=giftCode
 autoComplete="off"
 onChange=event => 
 setGiftCodeError(false);
 setGiftBalanceCheck(null);
 setGiftCode.bind(event.target.value);
 
/>

只需按照您已经完成的方式定义即可。

const clickHandler = () =>
       setGiftCode(''); // this needs value attribute to input element for clearing