Значение ввода сброшено - 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 
     }