<textarea>

<textarea />

• Ссылка
  • <textarea>
• Использование
  • Отображение текстовой области
  • Добавление метки к текстовой области
  • Указание начального значения для текстовой области
  • Чтение значения текстовой области при отправке формы
  • Управление текстовой областью с помощью переменной состояния
• Отладка
  • Моя текстовая область не обновляется при вводе
  • Курсор моей текстовой области переходит в начало при каждом нажатии клавиши
  • Ошибка: «Компонент изменяет неконтролируемый ввод на контролируемый»

Ссылка

<textarea>

Для отображения текстовой области используйте встроенный браузерный <textarea> компонент.

<textarea name="postContent" />

См. дополнительные примеры ниже.

Свойства

<textarea> поддерживает все общие свойства элементов.

Вы можете сделать текстовую область управляемой, передав value свойство:

• value: Строка. Управляет текстом внутри текстовой области.

При передаче value, вы также должны передать обработчик onChange, который обновляет переданное значение.

Если ваша <textarea> не управляемая, вы можете передать defaultValue свойство вместо этого:

• defaultValue: Строка. Указывает начальное значение для текстовой области.

Эти <textarea> свойства актуальны как для управляемых, так и для неуправляемых текстовых областей:

• autoComplete: Либо 'on' или 'off'. Определяет поведение автозаполнения.
• autoFocus: Булево значение. Если true, React сфокусирует элемент при монтировании.
• children: <textarea> не принимает дочерние элементы. Для задания начального значения используйте defaultValue.
• cols: Число. Определяет ширину по умолчанию в среднем количестве символов. По умолчанию 20.
• disabled: Булево значение. Если true, элемент ввода будет неактивным и отображаться затемнённым.
• form: Строка. Указывает id формы, к которой относится данный элемент ввода. Если опущено, используется ближайшая родительская форма.
• maxLength: Число. Указывает максимальную длину текста.
• minLength: Число. Указывает минимальную длину текста.
• name: Строка. Указывает имя для этого элемента ввода, которое отправляется с формой.
• onChange: Функция-обработчик Event. Требуется для управляемых текстовых областей. Срабатывает немедленно при изменении пользователем значения ввода (например, при каждом нажатии клавиши). Ведёт себя как браузерное событие input.
• onChangeCapture: Версия onChange, которая срабатывает в фазе захвата.
• onInput: Функция-обработчик Event. Срабатывает немедленно при изменении пользователем значения. По историческим причинам в React принято использовать onChange, которое работает аналогично.
• onInputCapture: Версия onInput, которая срабатывает в фазе захвата.
• onInvalid: Функция-обработчик Event. Срабатывает, если ввод не проходит валидацию при отправке формы. В отличие от встроенного события invalid, событие React onInvalid всплывает.
• onInvalidCapture: Версия onInvalid, которая срабатывает в фазе захвата.
• onSelect: Функция-обработчик Event. Срабатывает после изменения выделения внутри <textarea>. React расширяет событие onSelect для того, чтобы оно также срабатывало при пустом выделении и при редактировании (что может повлиять на выделение).
• onSelectCapture: Версия onSelect, которая срабатывает в фазе захвата.
• placeholder: Строка. Отображается в затемнённом цвете, когда значение текстовой области пустое.
• readOnly: Булево значение. Если true, текстовая область не может быть отредактирована пользователем.
• required: Булево значение. Если true, значение должно быть предоставлено для отправки формы.
• rows: Число. Определяет высоту по умолчанию в среднем количестве символов. По умолчанию 2.
• wrap: Либо 'hard', 'soft', или 'off'. Указывает, как должен быть переведён текст при отправке формы.

Ограничения

• Передача дочерних элементов, таких как <textarea>something</textarea>, запрещена. Используйте defaultValue для начального содержимого.
• Если текстовая область получает строковое value свойство, она будет обработана как управляемая.
• Текстовая область не может быть одновременно управляемой и неуправляемой.
• Текстовая область не может переключаться между управляемым и неуправляемым состоянием в течение своего жизненного цикла.
• Каждая управляемая текстовая область требует обработчик события onChange , который синхронно обновляет значение.

Использование

Отображение текстовой области

Отобразите <textarea> для отображения текстовой области. Вы можете указать её размеры по умолчанию с помощью rows и cols атрибутов, но по умолчанию пользователь сможет изменять её размер. Для отключения изменения размера можно задать resize: none в CSS.

export default function NewPost() {
  return (
    <label>
      Write your post:
      <textarea name="postContent" rows={4} cols={40} />
    </label>
  );
}

Добавление метки к текстовой области

Обычно вы помещаете каждую <textarea> внутри тега <label>. Это сообщает браузеру, что данная метка связана с этой текстовой областью. Когда пользователь щелкает по метке, браузер фокусирует текстовую область. Это также важно для доступности: экранный диктор объявит текст метки, когда пользователь сфокусируется на текстовой области.

Если вы не можете вложить <textarea> в <label>, свяжите их, передав одинаковый идентификатор <textarea id> и <label htmlFor>. Чтобы избежать конфликтов между экземплярами одного компонента, генерируйте такой идентификатор с помощью useId.

import { useId } from 'react';

export default function Form() {
  const postTextAreaId = useId();
  return (
    <>
      <label htmlFor={postTextAreaId}>
        Write your post:
      </label>
      <textarea
        id={postTextAreaId}
        name="postContent"
        rows={4}
        cols={40}
      />
    </>
  );
}

Указание начального значения для текстовой области

Вы можете необязательно указать начальное значение для текстовой области. Передайте его как строку defaultValue.

export default function EditPost() {
  return (
    <label>
      Edit your post:
      <textarea
        name="postContent"
        defaultValue="I really enjoyed biking yesterday!"
        rows={4}
        cols={40}
      />
    </label>
  );
}

Чтение значения текстовой области при отправке формы

Добавьте <form> вокруг вашей текстовой области с <button type="submit"> внутри. Это вызовет ваш <form onSubmit> обработчик событий. По умолчанию браузер отправит данные формы на текущий URL и обновит страницу. Вы можете изменить это поведение, вызвав e.preventDefault(). Прочтите данные формы с помощью new FormData(e.target).

export default function EditPost() {
  function handleSubmit(e) {
    // Prevent the browser from reloading the page
    e.preventDefault();

    // Read the form data
    const form = e.target;
    const formData = new FormData(form);

    // You can pass formData as a fetch body directly:
    fetch('/some-api', { method: form.method, body: formData });

    // Or you can work with it as a plain object:
    const formJson = Object.fromEntries(formData.entries());
    console.log(formJson);
  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <label>
        Post title: <input name="postTitle" defaultValue="Biking" />
      </label>
      <label>
        Edit your post:
        <textarea
          name="postContent"
          defaultValue="I really enjoyed biking yesterday!"
          rows={4}
          cols={40}
        />
      </label>
      <hr />
      <button type="reset">Reset edits</button>
      <button type="submit">Save post</button>
    </form>
  );
}

Управление текстовой областью с переменной состояния

Текстовая область, такая как <textarea />, является неуправляемой. Даже если вы передаете начальное значение, например <textarea defaultValue="Initial text" />, ваш JSX только задаёт начальное значение, а не текущее.

Чтобы отобразить управляемую текстовую область, передайте value свойство ей. React заставит текстовую область всегда иметь value значение, которое вы передали. Обычно вы управляете текстовой областью, объявив переменную состояния:

function NewPost() {
  const [postContent, setPostContent] = useState(''); // Declare a state variable...
  // ...
  return (
    <textarea
      value={postContent} // ...force the input's value to match the state variable...
      onChange={e => setPostContent(e.target.value)} // ... and update the state variable on any edits!
    />
  );
}

Это полезно, если вы хотите перерисовать часть пользовательского интерфейса в ответ на каждый ввод с клавиатуры.

{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest",
    "remarkable": "2.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {}
}

Отладка

Моя текстовая область не обновляется при вводе

Если вы отображаете текстовую область с value, но без onChange, вы увидите ошибку в консоли:

// 🔴 Bug: controlled text area with no onChange handler
<textarea value={something} />

Как подсказывает сообщение об ошибке, если вы хотели только указать начальное значение, передайте defaultValue вместо этого:

// ✅ Good: uncontrolled text area with an initial value
<textarea defaultValue={something} />

Если вы хотите управлять этой текстовой областью с помощью переменной состояния, укажите обработчик onChange:

// ✅ Good: controlled text area with onChange
<textarea value={something} onChange={e => setSomething(e.target.value)} />

Если значение предназначается для только чтения, добавьте свойство readOnly для подавления ошибки:

// ✅ Good: readonly controlled text area without on change
<textarea value={something} readOnly={true} />

Курсор моей текстовой области перескакивает в начало при каждом вводе с клавиатуры

Если вы управляете текстовой областью, вы должны обновить её переменную состояния до значения текстовой области из DOM во время onChange.

Вы не можете обновить её на что-то отличное от e.target.value:

function handleChange(e) {
  // 🔴 Bug: updating an input to something other than e.target.value
  setFirstName(e.target.value.toUpperCase());
}

Вы также не можете обновить её асинхронно:

function handleChange(e) {
  // 🔴 Bug: updating an input asynchronously
  setTimeout(() => {
    setFirstName(e.target.value);
  }, 100);
}

Чтобы исправить код, обновите его синхронно до e.target.value:

function handleChange(e) {
  // ✅ Updating a controlled input to e.target.value synchronously
  setFirstName(e.target.value);
}

Если это не решит проблему, возможно, текстовая область удаляется и добавляется снова из DOM при каждом вводе с клавиатуры. Это может произойти, если вы случайно сбрасываете состояние при каждом перерендеринге. Например, это может произойти, если текстовая область или один из её родителей всегда получают другое key свойство или если вы вложены определения компонентов (что запрещено в React и приводит к повторному монтированию «внутреннего» компонента при каждом рендере).

Ошибка: «Компонент изменяет неуправляемый ввод на управляемый»

Если вы предоставляете value компоненту, оно должно оставаться строкой на протяжении всего его существования.

Вы не можете сначала передать value={undefined} и позже передать value="some string", потому что React не будет знать, хотите ли вы, чтобы компонент был неуправляемым или управляемым. Управляемый компонент всегда должен получать строку value, а не null или undefined.

Если ваше value значение поступает из API или переменной состояния, оно может быть первоначально null или undefined. В этом случае либо установите его в пустую строку ('') изначально, либо передайте value={someValue ?? ''}, чтобы убедиться, что value является строкой.