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

我有一个输入字段，我通过onKeyUp处理输入（因为我需要访问

event.which

）。这非常有效，因为我只是通过

event.target.value

获取输入的内容，但在尝试重置输入字段的值时遇到了问题

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

---

我忘了提到我使用的是Material UI。

通过强制将

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>
    </>
  );
}

const-App=（）=>{
const textInput=React.useRef（）；
常量clearInput=（）=>（textInput.current.value=“”）；
返回(
重置
);
}

通过强制将

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>
    </>
  );
}

const-App=（）=>{
const textInput=React.useRef（）；
常量clearInput=（）=>（textInput.current.value=“”）；
返回(
重置
);
}

我当前的解决方案使用onChange更新值的状态，使用onKeyUp处理输入（并最终重置值）：

导出默认函数TypingArea（）{
常量[inputValue，setInputValue]=useState（“”）；
const handleChange=事件=>{
setInputValue（event.target.value）；
};
常量handleInput=事件=>{
//访问event.which以获取keycode并最终清除inputfield值
setInputValue（“”）；
}  
返回(
);
}

---

我可能会遇到此设置问题，因为我不确定是谁先运行onChange还是onKeyUp，但它现在可以工作。

我当前的解决方案使用onChange更新值的状态，使用onKeyUp处理输入（并最终重置值）：

导出默认函数TypingArea（）{
常量[inputValue，setInputValue]=useState（“”）；
const handleChange=事件=>{
setInputValue（event.target.value）；
};
常量handleInput=事件=>{
//访问event.which以获取keycode并最终清除inputfield值
setInputValue（“”）；
}  
返回(
);
}

---

我可能会遇到此设置问题，因为我不确定谁先运行onChange或onKeyUp，但它现在可以工作。

考虑到您使用的是功能组件，您可以执行e.target.reset

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

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

e、 target.reset（）

}；
常量handleChange=e=>{
设定状态({
……国家，
[e.target.name]：e.target.value
});
};
返回(
登录




);
}

考虑到您使用的是功能组件，您可以执行e.target.reset

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

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

e、 target.reset（）

}；
常量handleChange=e=>{
设定状态({
……国家，
[e.target.name]：e.target.value
});
};
返回(
登录




);
}

是否只能通过事件（如onClick）将其清除？我需要在名为“onKeyUp”的“handleInput”方法中清除它。您可以在任何需要的地方重复此代码，只需设置属性的值：

textInput.current.value=”“

我想我的问题是由MaterialUI textfield引起的，切换到一个简单的输入字段，如您所述。我需要进行切换，因为文本字段的性能比简单输入慢得多。是否只能通过事件（例如onClick）清除它？我需要在名为“onKeyUp”的“handleInput”方法中清除它。您可以在任何需要的地方重复此代码，只需设置属性的值：

textInput.current.value=”“

我想我的问题是由MaterialUI textfield引起的，切换到一个简单的输入字段，如您所述。我需要进行切换，因为textfield的性能比简单输入慢得多。