如何使用React Draft Wysiwyg以一种形式拥有多个所见即所得的编辑器文本

Question

我想以一种形式拥有3个所见即所得的editorText字段

理想地，我正在构造函数上尝试以下操作，以具有3个editorText字段：

class AnalysisReport extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newReport: {
        title: '',
        objectives: EditorState.createEmpty(),
        analysisDetails: EditorState.createEmpty(),
        conclusions: EditorState.createEmpty(),
      }
    };

....

和处理函数：

  updateObjectives = editorState => {

    this.setState(prevState => ({
      newReport: {
        ...prevState.newReport,
        objectives: editorState
      }
    }));
  };

  updateAnalysisDetails = editorState => {

    this.setState(prevState => ({
      newReport: {
        ...prevState.newReport,
        analysisDetails: editorState
      }
    }));
  };

  updateConclusions = editorState => {

    this.setState(prevState => ({
      newReport: {
        ...prevState.newReport,
        conclusions: editorState
      }
    }));
  };

然后，在我定义的textEditor组件上使用它：

<WysiwygField onChangeText={this.updateObjectives} />
<WysiwygField onChangeText={this.updateAnalysisDetails} />
<WysiwygField onChangeText={this.updateConclusions} />

这个想法目前行不通，我注意到“ editorState”不允许我在构造函数中声明的字段上赋值，因为它会导致错误。

实现目标的最佳方法是什么？