1

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

我已经完成并以我的形式工作，我有我想要的控件等，但我只是不知道从那里去哪里。

我的结构如下所示：

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

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

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

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

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

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

4

1 回答 1

2

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

...

_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>
    );
}
...
于 2017-03-07T14:22:06.713 回答