Javascript 如何从React中的useRef重置输入字段？

我有一个文本输入。如果单击页面中的特定按钮，我希望重置输入值。这是我的密码：

常量inputRef=useRef（） 常量handleClick=（）=>{ inputRef.current.value.reset（）； 返回“你好，世界” } 返回( handleClick}>全部删除

---

)您可以清除输入字段中的值，如下所示

consthandleclick=（）=>{
inputRef.current.value=“”；
返回“你好，世界”
}

然后按下面的按钮更改

onClick

call

onClick={handleClick}
//或
onClick={（）=>handleClick（）}

如果要完全重置具有多个输入的表单，可以遵循以下方法。 在下面的示例中，表单将在提交后重置

const formRef=useRef（）；
常量handleClick=（）=>{
formRef.current.reset（）；
}
render（）{
返回(
...
);
}

如果你不想使用Ref

const handleSubmit=e=>{
e、 预防默认值（）；
e、 target.reset（）；
}
...

您有两个问题，一个是将调用函数的函数传递到onClick处理程序中，这是不需要的。如果在渲染之前定义函数，则不需要将匿名函数传递给onClick处理程序

// Before
<button onClick={()=> handleClick}>delete all</button>

// After
<button onClick={handleClick}>delete all</button>

---

通过将文本输入字段的值设置为空字符串，可以清除该字段。如果要使用非受控输入，可以这样做

inputref.current.value=“

但是，如果要使用受控输入，可以创建状态变量来跟踪输入字段的值。比如说,

const SomeComponent=（）=>{
const[text，setText]=useState（“”）
返回(
setText（e.target.value）}/>
setText（“”）}>全部删除
);
};

---

这是一个包含这两种实现的示例。

reset

可在

表单

元素中找到。 您可以使用表单包装输入，并在其上触发

reset

const{useRef}=React；
常量应用=（）=>{
const formRef=useRef（）；
常量handleClick=（）=>{
formRef.current.reset（）；
返回“你好，世界”；
};
返回(
全部删除
);
};
ReactDOM.render（，document.getElementById（'root'））

您应该对输入使用状态，因此只需重置状态即可。使用react，您应该尽可能避免直接访问Dom。好的，我刚刚用我的状态重置了输入值。我很想知道怎么做。永远不要改变状态！用这样的方法重置状态
.setState（{input:}）
是的，这就是我所做的。输入值={query}/>然后是setQuery（“”）。这是否回答了您的问题？如果您看到有问题的最后一条注释，他只是想重置输入字段的值。要完成表单重置，用户可以使用
元素中的Ref，并使用
f\u Ref.current.reset（）重置表单。
我已经更新了示例。。感谢您的反馈。：）是的，但您的答案是
重置值…
这将误导未来的用户，因为您实际上并没有重置-只是清除输入的任何值-这将包括任何默认值。当存在默认值时，这一点很重要。感谢您的注意。。我正在更新我的答案
  const handleClick = e => {
   inputRef.current.value = "";
   return "hello world";
  };