reactjs - 输入值清除 - React Hooks

Question

我正在尝试使用下面的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 没有改变组件的实际状态有没有其他方法可以做到这一点。请参阅下图了解。

Answer 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);
              }}
         />

Answer 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 
     }