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

【问题标题】：How to reset input field from useRef in React?如何从 React 中的 useRef 重置输入字段？
【发布时间】：2020-10-06 07:48:39
【问题描述】：

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

const inputRef = useRef()

const handleClick= () => {
 inputRef.current.value.reset();
 return "hello world"
}

return (
<>
<input type="text" ref={inputRef}/>
<button onClick={()=> handleClick}>delete all</button>
</>
)

它不起作用。如何解决这个问题？

【问题讨论】：

您应该使用状态作为输入，所以只需重置状态。使用 react 应该尽可能避免直接访问 Dom。
好的，我刚刚用我的状态重置了输入值。不过我很想知道该怎么做。
永远不要改变状态！只需用这样的东西重置状态.. .setState({ input: "" })
是的，这就是我所做的。输入 value={query}/> 然后 setQuery("")
这能回答你的问题吗？ Clear and reset form input fields

标签： javascript reactjs

【解决方案1】：

reset 在form 元素上可用。您可以使用表单包装您的输入，并在其上触发reset。

const {useRef} = React;
const App = () => {
  const formRef = useRef();

  const handleClick = () => {
    formRef.current.reset();
  };

  return (
    <form ref={formRef}>
      <input type="text" />
      <input type="password" />
      <input type="checkbox" />
      <textarea></textarea>
      <button onClick={handleClick} type="button">
        clear form
      </button>
    </form>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

【解决方案2】：

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

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

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

另一个问题是您的 handleClick 函数调用了 reset，这不是输入上的函数。要重置引用输入的值，您可以将其设置为空字符串（或任何您想要的“默认”值）。

  const handleClick = e => {
   inputRef.current.value = "";
   return "hello world";
  };

【讨论】：

【解决方案3】：

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

const handleClick= () => {
 inputRef.current.value = "";
 return "hello world"
}

并在按钮中更改onClick 调用，如下所示

onClick={handleClick}
//or
onClick={()=> handleClick()}

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


const formRef = useRef();

const handleClick = () => { 
  formRef.current.reset();
}

render() {
  return (
    <form ref={formRef}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

如果你不想使用 Ref

const handleSubmit = e => {
 e.preventDefault();
 e.target.reset();
}

<form onSubmit={handleSubmit}>
  ...
</form>

【讨论】：

如果您看到最后一条评论，他只是想重置输入字段的值。要完成表单重置，用户可以使用<form ref={f_ref}>元素中的Ref并使用f_ref.current.reset()重置它
我已经更新了示例。感谢您的反馈。 :)
是的，但是您对reset the value... 的回答表明这将误导未来的用户，因为您实际上并没有重置 - 只是清除输入的任何值 - 这将包括任何默认值。当有默认值时，这一点很重要。
感谢您的关注。我正在更新我的答案

【解决方案4】：

您可以通过将其值设置为空字符串来清除文本输入字段。如果你想使用不受控制的输入，你可以像 inputref.current.value = "" 那样做。

但是，如果您想使用受控输入，您可以创建一个状态变量来跟踪输入字段的值。例如，

const SomeComponent = () => {
  const [text, setText] = useState('')

  return (
    <>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setText('')}>delete all</button>
    </>
  );
};

这是一个codesandbox，同时实现。

【讨论】：