在 React.js 中清除输入字段的值

作者

在 React.js 中清除输入字段的值

Clear an Input field’s value in React.js

在 React 中清除输入字段的值：

  1. 将输入的值存储在状态变量中。
  2. 当某个事件发生时，将状态变量设置为空字符串。
  3. 对于不受控制的组件，将 ref 的值设置为空字符串，例如
    ref.current.value = '';.

反应清除输入值

应用程序.js
import {useState} from 'react';

const App = () => {
  // 👇️ store input's value in state
  const [message, setMessage] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);
  };

  const handleClick = () => {
    // 👇️ clear input value
    setMessage('');
  };

  return (
    <div>
      <input
        id="message"
        name="message"
        type="text"
        onChange={handleChange}
        value={message}
      />

      <button onClick={handleClick}>Clear field</button>
    </div>
  );
};

export default App;

我们使用useState
钩子将输入字段的值存储在状态变量中。

要清除输入值，我们必须将message状态变量设置为空字符串。

handleClick每次单击按钮时，我们传递给onClick按钮元素属性的函数都会被调用。

该按钮可以是表单的提交按钮或触发事件的简单按钮。

这种方法可用于根据需要重置尽可能多的输入字段的值。

如果您将不受控制的组件与
useRef挂钩一起使用，请将 ref 的值设置为空字符串。

应用程序.js
import {useRef} from 'react';

const App = () => {
  const ref = useRef(null);

  const handleClick = () => {
    // 👇️ clear input field value
    ref.current.value = '';
  };

  return (
    <div>
      <input ref={ref} id="message" name="message" type="text" />

      <button onClick={handleClick}>Clear field</button>
    </div>
  );
};

此代码示例实现了相同的结果，但针对的是不受控制的组件。

useRef()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的input元素。 ref

当我们将 ref prop 传递给元素时，例如<input ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

这种方法可用于根据需要清除尽可能多的不受控制的输入字段的值。

或者，在使用不受控制的输入字段时，您也可以使用该
reset()方法清除表单中所有输入字段的值。

应用程序.js
import {useRef} from 'react';

const App = () => {
  const firstRef = useRef(null);
  const lastRef = useRef(null);

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault();

    // 👇️ clear all input values in the form
    event.target.reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          ref={firstRef}
          id="first_name"
          name="first_name"
          type="text"
        />
        <input
          ref={lastRef}
          id="last_name"
          name="last_name"
          type="text"
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

清除多个输入字段

请注意，此方法不适用于我们将输入字段的值存储在状态中的受控组件。

我们使用函数中的event.preventDefault()方法来防止提交表单时页面刷新。 handleSubmit

reset()
方法恢复表单元素的默认值。

无论您的表单有多少不受控制的输入字段，对该reset()方法的一次调用都会清除所有这些字段。

–

发表评论