迹忆客 专注技术分享

在 React 中使用 onChange 修改文本区域的值：

1. 将 onChange 属性添加到文本区域，将其设置为一个函数。
2. 通过 useState 钩子将文本区域的值存储在状态中。
3. 每次用户在文本区域中键入时更新状态变量。

import {useState} from 'react';

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

  const handleMessageChange = event => {
    // 👇️ update textarea value
    setMessage(event.target.value);
    console.log(event.target.value);
  };

  return (
    <div>
      <label htmlFor="message">My Textarea</label>
      <textarea
        id="message"
        name="message"
        value={message}
        onChange={handleMessageChange}
      />
    </div>
  );
};

export default App;

我们使用 useState 钩子将 textarea 元素的值存储在组件的状态中。

我们将一个函数传递给文本区域的 onChange 属性，因此每次用户在该字段中键入内容时，都会调用 handleMessageChange 函数。

我们可以访问事件对象上文本区域元素的值作为 event.target.value。

事件的目标属性是对 textarea 元素的引用。

设置文本区域的值后，我们可以使用消息状态变量访问它。

我们可能会在 React 中看到的另一种方法是通过 ref 使用不受控制的字段。

import {useRef} from 'react';

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

  const handleClick = event => {
    // 👇️ access textarea value
    console.log(ref.current.value);
  };

  return (
    <div>
      <label htmlFor="message">My Textarea</label>
      <textarea ref={ref} id="message" name="message" />

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

export default App;

每次单击按钮时，textarea 的值都会被记录到控制台。

请注意 ，我们没有在 textarea 元素上使用 onChange 属性。 对于不受控制的字段，我们不会在每次击键时跟踪字段的值，而是在需要时访问它。

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

请注意 ，我们必须访问 ref 对象的当前属性才能访问我们设置 ref 属性的 textarea 元素。

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

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

我们可以通过 ref.current 访问 textarea 元素上的任何属性。 如果我们在 ref 对象上记录当前属性，它只是对 textarea 元素的引用。