Как очистить значение поля ввода в функциональном компоненте без использования состояния?

Question

У меня есть поле ввода, и я обрабатываю ввод через onKeyUp (так как мне нужно получить доступ к event.which). Это прекрасно работает, поскольку я просто получаю содержимое ввода с помощью event.target.value, но сталкиваюсь с проблемами при попытке сбросить значение поля ввода.

Я использую функциональные компоненты, поэтому доступввод через refs невозможен, и все примеры, которые я нашел с помощью useRef, просто показывают, как сфокусировать поле ввода, а не как его очистить.

Я забыл упомянуть, что я использую Material-UI.

Answer 1

Вы можете очистить значение ввода с помощью ссылки внутри функционального компонента, установив ref.current.value обязательно в пустую строку:

const App = () => {
  const textInput = React.useRef();

  const clearInput = () => (textInput.current.value = "");

  return (
    <>
      <input type="text" ref={textInput} />
      <button onClick={clearInput}>Reset</button>
    </>
  );
}

Answer 2

Мое текущее решение использует onChange для обновления состояния значения и onKeyUp для обработки ввода (и, в конечном итоге, сброса значения):

export default function TypingArea() {
const [inputValue, setInputValue] = useState('');

const handleChange = event => {
  setInputValue(event.target.value);
};

const handleInput = event => {
  // access event.which for the keycode and eventually clear the inputfield value
  setInputValue('');
}  

return (
<TextField
  onChange={handleChange}
  onKeyUp={handleInput}
  type='text'
  value={inputValue} />);
}

У меня могут возникнуть проблемы с этой настройкой, так как яне уверен, кто запускается первым, onChange или onKeyUp, но пока работает.