如何在不使用状态的情况下清除功能组件中输入字段的值？

Question

我有一个输入字段，我通过 onKeyUp 处理输入（因为我需要访问 event.which）。到目前为止，这很好用，因为我只是通过 event.target.value 获取输入的内容，但是当我尝试重置输入字段的值时，我运行遇到了问题。

我使用的是功能组件，因此无法通过 refs 访问输入，我在 useRef 中找到的所有示例都只展示了如何聚焦输入字段，而不是如何清除它。

我忘了说我正在使用 Material-UI.

Answer 1

您可以通过将 ref.current.value 命令式设置为空字符串来清除功能组件中带有 ref 的输入值：

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，但它现在有效。

Answer 3

考虑到您使用的是功能组件，您可以 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>
  );
}

Answer 4

const [tasks, setTasks] = useState([]);
const [input, setInput] = useState(' ');


Const addTask = () => {
       setTasks([...tasks, input])
       SetInput(' ')

}
return (
  <button onClick={addTasks}/>Add Task <button/>
)

如何在不使用状态的情况下清除功能组件中输入字段的值？

How to clear the value of an input field in a functional component without using state?

reactjs

material-ui

react-functional-component