在 React 中获取 Input 字段的值

要在 React 中获取输入字段的值：

1. 声明一个跟踪输入字段值的状态变量。
2. 将 onChange 属性添加到输入字段。
3. 使用 event.target.value 获取输入字段的值并更新状态变量。

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

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

    console.log('value is:', event.target.value);
  };

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

      <h2>Message: {message}</h2>
    </div>
  );
};

export default App;

我们使用 useState 钩子来跟踪输入字段的值。

我们在字段上设置了 onChange 属性，所以每次它的值发生变化时，都会调用 handleChange 函数。

我们可以在 handleChange 函数中以event.target.value的形式访问输入元素的值。

event 对象的 target 属性指的是输入元素。

我们可以使用消息状态变量在 handleChange 函数之外的任何位置访问输入字段的值。

或者，我们可以使用不受控制的输入字段。

要在 React 中获取不受控制的输入字段的值：

1. 使用 useRef 挂钩初始化 ref。
2. 在输入字段上设置 ref 属性。
3. 以 ref.current.value 的形式访问输入字段的值。

import {useRef} from 'react';

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

  function handleClick() {
    console.log(inputRef.current.value);
  }

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

      <button onClick={handleClick}>Log message</button>
    </div>
  );
};

export default App;

此示例使用不受控制的输入。请注意，输入字段没有设置 onChange 或 value 属性。

我们可以使用 defaultValue 属性将初始值传递给不受控制的输入。但是，这不是必需的，如果我们不想设置初始值，可以省略该属性。

当使用不受控制的输入字段时，我们使用 ref 访问输入。

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

注意 ，我们必须访问 ref 对象的 current 属性才能访问我们设置 ref 属性的输入元素。

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

useRef 钩子创建一个普通的 JavaScript 对象，但在每次渲染时为我们提供相同的 ref 对象。换句话说，它是一个带有 .current 属性的记忆对象值。

需要注意的是，当我们更改 ref 的当前属性的值时，不会导致重新渲染。

每次用户单击示例中的按钮时，都会记录不受控制的输入值。

我们不应该在不受控制的输入（没有 onChange 处理程序的输入字段）上设置 value prop，因为这会使输入字段不可变并且我们将无法输入它。

火焰兔

海报 链接