Как получить значение из элемента в React js?

Question

Это мое самое первое приложение на React. Я создал компонент, и когда пользователь добавляет текст в textArea и нажимает кнопку «Загрузить PDF», я хочу передать defaultValue в функцию convertToPdf.

Как мне это сделать? По сути, я пытаюсь создать загрузчик PDF. Любая помощь будет принята с благодарностью.

pdfComponent. js

import React, { Component } from "react";
import autosize from "autosize";
import Button from '@material-ui/core/Button';

export class PDFEditorComponent extends Component {

  componentDidMount() {
    this.textarea.focus();
    autosize(this.textarea);
  }
    
  convertToPdf() {
    this.setState(this.textarea);
    console.log("TEXT", this.textarea);
  }
    
  render() {
    const style = {
       maxHeight: "175px",
       minHeight: "450px",
       minWidth: "800px",
       resize: "none",
       padding: "9px",
       boxSizing: "border-box",
       fontSize: "15px"
    };
    return (
       <div>
         PDF Downloader
         <br />
         <br />
         <textarea
              style={style}
              ref={c => (this.textarea = c)}
              placeholder="Paste pdf data"
              rows={1}
              defaultValue=""
         />
         <br />
         <Button
              variant="contained"
              color="primary"
              onClick={() => this.convertToPdf(this.textarea)}
         >
            Download Pdf
         </Button>
       </div>
    );
  }
}

Answer 1

Bulletpoints:

1. Фактически создайте ссылку для вашего текстового поля (в конструкторе)

constructor(props) {
    super(props);

    this.textareaRef = React.createRef();
}

затем передайте его в свой элемент текстового поля, как это

ref={this.textareaRef}

В вашем convertToPdf () используйте его так:

this.setState({value: this.textareaRef.current.value})

Состояние реакции состоит из пар ключ-значение, поэтому вы должны инициализировать его в конструкторе следующим образом

this.state = {
    value: null;
}

, а затем всякий раз, когда вы хотите его изменить (только из этого компонента), вы вызовите setState (), как я сделал в стр. 2

Вы смешиваете html элементов с JS переменными: вы не можете вызвать this.textarea, потому что это не переменная (и не константа), поэтому удалите все такие ссылки на нее. В React единственный способ получить доступ к элементам DOM - это ссылки (которые вы уже как бы пробовали, я исправил вас на стр. 1).

Наслаждайтесь React, это здорово :)