Question

我正在开展一个反应项目，我们将使用很多表单，包括具有丰富HTML的字段。我搜索了一会儿，偶然发现了草案-js。这似乎非常好，但我似乎无法找到如何从头到尾使用它的任何好例子。我发现的大多数是如何修改控件，但这不是我想要的。它的基本功能是我目前所需要的。

我已经把它拿起并以我的形式工作，我有我想要的控件等等，但我不知道从那里去哪里。

我的结构如下：

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

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

我也没有新的反应，但我想我应该在SubmitButton的{{1}}上提交一个提交事件，该事件从{{1}传递下来}。

我的onClick handler应该触发FormContainer以保存表单中的数据。

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

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

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

草案js数据流示例

1 个答案: