如何在 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