React 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

根据评论编辑：

这里有一个非常基本的 React 数据绑定 Tiny 的例子。它使用“官方”的 TinyMCE 组件。它看起来与您的非常相似，除了使用onEditorChange event 将编辑器视为受控组件。

现在，当您键入时，您会看到控制台中的状态发生变化，并且您的数据已绑定，您可以将其移出状态，但最适合您的应用。你的三元不应该影响这一点。

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>
    );
  }
}