React Текстовая область

Работа с элементом <textarea> в React немного отличается от обычного HTML.

Основное отличие заключается в том, каким образом устанавливается значение текстового поля.

В HTML значение текстового поля располагается между открытием и закрытием тега <textarea>:

<textarea>
  Содержимое текстового поля.
</textarea>

В React значение элемента <textarea> указывается в специальном атрибуте value, аналогично тому, как это делается для элемента <input>.

Мы воспользуемся хуком useState, чтобы управлять значением текстового поля:

import { createRoot } from 'react-dom/client'
import { useState } from 'react'

function MyForm() {
  const [mytxt, setMytxt] = useState("");

  function handleChange(e) {
    setMytxt(e.target.value);
  }

  return (
    <form>
      <label>Введите текст здесь:
        <textarea
          value={mytxt}
          onChange={handleChange}
        />
      </label>
      <p>Текущее значение: {mytxt}</p>
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

Пояснение к примеру:

1. Мы объявляем состояние mytxt с помощью хука useState, инициализируя его пустой строкой.
2. Обработчик события handleChange обновляет состояние при изменении содержимого текстового поля.
3. Текущее значение текстового поля отображается ниже поля ввода, демонстрируя, что изменение отражается в состоянии компонента.

Изменяя значение текстового поля подобным образом, React способен воспринимать и обрабатывать <textarea> так же, как и другие элементы ввода.