如何在 React 中获取 textarea 的值

在 React 中获取 textarea 的值相对简单。你可以通过 state 或 ref 来获取 textarea 中输入的文本。

使用 state

你可以通过在 state 中创建一个变量来存储 textarea 的值。在 onChange 事件中更新它。以下是一个基本的示例：

import React, { useState } from 'react';

function TextArea() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <textarea value={value} onChange={handleChange} />
  );
}

在此示例中，我们在组件内部使用 useState 钩子来定义 state 的 value 变量。在 textarea 上，我们将 value 值设置为 state 中的 value 变量。当 textarea 中发生更改时，handleChange 方法将被调用并更新我们的 state 变量。

使用 ref

React 还允许使用 ref 访问 DOM 元素。这是通过在组件中使用 useRef 钩子来完成的。以下是示例：

import React, { useRef } from 'react';

function TextArea() {
  const textareaRef = useRef(null);

  const handleClick = () => {
    const value = textareaRef.current.value;
    console.log(value);
  };

  return (
    <>
      <textarea ref={textareaRef} />
      <button onClick={handleClick}>获取 textarea 值</button>
    </>
  );
}

在此示例中，我们使用 useRef 钩子创建了一个名为 textareaRef 的引用。在组件内部，我们将此引用传递给 textarea 的 ref 属性上。

当 handleClick 方法被调用时，我们使用 textareaRef.current.value 获取 textarea 的值。

结论

以上是在 React 中获取 textarea 的值的两种方法。你可以使用其中任一种方法，具体取决于你的任务和个人偏好。如果你想将 textarea 的值存储在组件的 state 中，可以使用 useState。如果你只需要在某个特定时间点访问 textarea 的值，则可以使用 useRef。