Очистить входное значение - 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

Почему бы не использовать исх. Назначьте свое состояние как значение во входных данных?

    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 
     }