如何在 React 中重置来自 useRef 的输入字段？

Question

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

 const inputRef = useRef() const handleClick= () => { inputRef.current.value.reset(); return "hello world" } return ( <> <input type="text" ref={inputRef}/> <button onClick={()=> handleClick}>delete all</button> </> )

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

Answer 1

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

 const {useRef} = React; const App = () => { const formRef = useRef(); const handleClick = () => { formRef.current.reset(); return 'hello world'; }; return ( <form ref={formRef}> <input type="text" /> <button onClick={handleClick} type="button"> delete all </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>

Answer 2

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

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>

Answer 3

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

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

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

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

这是一个 包含两种实现的代码框。

Answer 4

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

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

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

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

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

Answer 5

rest 输入值

 import { useRef } from 'react' const Test = () => { const testRef = useRef(null) return ( <div> <input type="text" ref={testRef} /> <button onClick={() => inputSearch.current.value = ''}>×</button> </div> ) } export default Test