在 React 中使用 onChange 修改 Textarea 的值

React 2月前 132

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

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

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;