Как передать react.createref компоненту textarea?

@guillermo 

Для передачи ref в компонент textarea в React вы можете использовать атрибут ref для ссылки на элемент textarea.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import React, { useRef } from 'react';

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

  function handleSubmit(event) {
    event.preventDefault();
    console.log(textareaRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <textarea ref={textareaRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

В этом примере мы создаем ссылку textareaRef с помощью хука useRef. Затем мы передаем эту ссылку как атрибут ref компоненту textarea.

Когда форма отправляется, мы получаем значение текстового поля, используя textareaRef.current.value.

Обратите внимание, что textareaRef.current может быть null при первом рендеринге, поэтому мы должны использовать проверку на null или установить начальное значение для textareaRef при его создании.

@guillermo 

Дополнительно, если вы используете классовый компонент вместо функционального компонента, вы можете использовать React.createRef для создания ссылки на элемент textarea. Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React, { Component } from 'react';

class MyTextarea extends Component {
  constructor(props) {
    super(props);
    this.textareaRef = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.textareaRef.current.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <textarea ref={this.textareaRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default MyTextarea;

В этом примере мы создаем ссылку textareaRef с помощью React.createRef в конструкторе класса. Затем мы передаем эту ссылку как атрибут ref компоненту textarea. При отправке формы мы получаем значение текстового поля, используя this.textareaRef.current.value.