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

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

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

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


reactjs material-ui react-functional-component
person Christian Strang    schedule 20.10.2019    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Вы можете очистить значение ввода с помощью ref внутри функционального компонента, установив 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>
    </>
  );
}
person Chris B.    schedule 20.10.2019
comment
Можно ли очистить его только через события (например, onClick)? Мне нужно было бы очистить его в моем методе handleInput, который вызывается onKeyUp. - person Christian Strang; 21.10.2019
comment
Нисколько. Вы можете повторять этот код где угодно, он просто устанавливает значение свойства: textInput.current.value = "" - person Chris B.; 21.10.2019
comment
Я думаю, что моя проблема была вызвана текстовым полем MaterialUI, переключение на простое поле ввода сработало, как вы упомянули. Мне нужно было переключиться, так как производительность текстового поля была намного медленнее, чем простой ввод. - person Christian Strang; 23.10.2019

arrow_upward
3
arrow_downward

Мое текущее решение использует 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, но пока это работает.

person Christian Strang    schedule 21.10.2019

arrow_upward
0
arrow_downward

вы можете сделать e.target.reset, учитывая, что вы используете функциональный компонент.

 const [state, setState] = React.useState({ username: "", password: "" });

  const handleSubmit = e => {
    e.preventDefault();
    console.log(state);

e.target.reset();

  };
const handleChange = e => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };
  return (
    <div className="App">
      <h1>Log In</h1>
      <form onSubmit={handleSubmit}>
        <input
          className="userInput"
          name="username"
          type="text"
          placeholder="username"
          onChange={handleChange}
        />
        <br />
        <input
          className="userInput"
          name="password"
          type="password"
          placeholder="password"
          onChange={handleChange}
        />
        <br />
        <input className="userSubmit" type="submit" value="Log In" />
      </form>
    </div>
  );
}
person Aarthi    schedule 05.05.2021