Реагируйте TinyMCE - данные не являются обязательными

Question

Я создал компонент textarea React с возможностью использовать Tiny MCE, который я реализую с использованием компонента react-tinymce.

import React, { Component } from "react";
import TinyMCE from "react-tinymce";

class Textarea extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: {
        body: ""
      }
    };
  }

  // ..a few methods not relevant to this question..

  handleFieldChange(e) {
    const data = { ...this.state.data };
    data[e.target.name] = e.target.value;
    this.setState({ data });
  }

  render() {
    return (
      <div>
        {this.props.showLabel ? (
          <label htmlFor={this.props.id}>{this.props.label}</label>
        ) : null}

        {!this.props.mce ? (
          <textarea
            className={`form-control ${this.state.error ? "error" : ""}`}
            id={this.props.id}
            type={this.props.type}
            name={this.props.name}
            value={this.props.value}
            placeholder={this.props.placeholder}
            onChange={this.handleFieldChange}
          />
        ) : (
          <TinyMCE
            name={this.props.name}
            content={this.props.value}
            config={{
              plugins: "autolink link image lists print preview code",
              toolbar:
                "undo redo | bold italic | alignleft aligncenter alignright | code",
              height: 300,
              branding: false,
              statusbar: false,
              menubar: false
            }}
            onChange={this.handleFieldChange}
          />
        )}
      </div>
    );
  }
}

export default Textarea;

Я бы в основном использовал такой компонент:

<Textarea 
  name="body" 
  label="Body"
  showLabel={true}
  placeholder="body"
  value={data.body} 
  mce={true}
/>

То есть, если для mce установлено значение true, вы получаете компонент TinyMCE.

Но в то время как обычная версия textarea связывает то, что вы вводите в state.data.body, версия TinyMCE этого не делает.

// after typing into TinyMCE and submitting
console.log(this.state.data.body); // empty string

обратите внимание, что этот Textarea компонент используется как часть компонента формы с методом onSubmit.

Answer 1

Отредактировано на основе комментария:

Итак, вот действительно базовый пример привязки данных Tiny in React. Он использует «официальный» компонент TinyMCE. Он выглядит довольно похоже на ваш, за исключением использования события onEditorChange , чтобы рассматривать редактор как контролируемый компонент.

Теперь, когда вы печатаете, вы увидите изменение состояния в консоли, и ваши данные будут связаны, и вы сможете вывести их из состояния, однако лучше всего подойдет для вашего приложения. Ваша троица не должна на это влиять.

import React, { Component } from 'react';
import './App.css';
import {Editor} from '@tinymce/tinymce-react';

class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
}

  handleEditorChange = (content) => {
    this.setState({ text: content });;
  }


  render() {
    console.log(this.state.text);
    return (
      <div className="App">
       <Editor
        apiKey = 'KEY'
        value={this.state.text}
        onEditorChange={this.handleEditorChange}
        init={{
            theme: 'modern',
            width: '75%',
            height: '250px',
            plugins: 'table colorpicker spellchecker powerpaste hr link media image textcolor print noneditable  lists',
            toolbar:  'styleselect | bold italic underline forecolor | alignleft aligncenter alignright | bullist numlist | outdent indent | globalImagesButton link ',
            powerpaste_allow_local_images: true,
            image_advtab: true,
        }}
      />

      </div>
    );
  }
}