draft js 数据流示例

Question

我正在做一个 React 项目，我们将在其中使用大量表单，包括具有丰富 HTML 的字段。我搜索了一会儿，偶然发现了 draft-js。看起来很好，但是我似乎找不到任何从头到尾如何使用它的好例子。我发现的大部分内容是如何修改控件，但这不是我要找的。它的基本功能是我目前所需要的。

我已经准备好并在我的表单中工作，我有我想要的控件等等，但我只是不知道从那里去哪里。

我的结构如下所示：

<Root>
    <FormContainer>
        <FormBody>
            <DraftEditor1>
            <DraftEditor2>
        <FormFooter>
            <CancelButton>
            <SubmitButton>

我研究了 EditorState、convertToRaw 等，但无法弄清楚如何从我的提交事件中访问 EditorState。

我对反应也有点陌生，但我认为我应该在从 FormContainer.

然后我的 clickHandler 应该触发 Redux Action 以将数据保存在表单中。

但在那种情况下，我如何访问 EditorState 并将其转换为正确的数据格式，特别是考虑到我的表单中有多个 DraftEditors？

如果您知道任何很棒的示例或教程，请告诉我。

Answer 1

我起草了一个简单的代码，可以给你一个思路：

...

_handleSubmit() {
  // dispatch an action
  // or save to redux store
  const { draftEditor1, draftEditor2 } = this.state;
  this.props.handleSubmit(draftEditor1, draftEditor2);
}

render() {
    return (
      <FormContainer>
        <FormBody>
          <DraftEditor1 editorState={this.state.draftEditor1} onChange={this.onChange1}>
          <DraftEditor2 editorState={this.state.draftEditor2} onChange={this.onChange2}>
        </FormBody>
        <FormFooter>
          <CancelButton />
          <SubmitButton onClick={this._handleSubmit} />
        </FormFooter>
      </FormContainer>
    );
}
...

draft js 数据流示例

draft js data flow examples

javascript

reactjs

draftjs