草案js數據流示例

Question

我正在開發一個反應項目，我們將使用很多表單，包括帶有豐富HTML的字段。我搜索了一會兒，偶然發現了草稿-js。它看起來非常好，但我似乎無法找到如何從頭到尾使用它的任何好例子。我發現的大部分是如何修改控件，但這不是我正在尋找的。其基本功能是目前我需要的。

我已經掌握了它並在我的表單中工作，我有我想要的控件等，但我只是不知道該從哪裏去。

我的結構是這樣的：

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

我已經調查EditorState，convertToRaw等，但無法弄清楚如何從我提交事件訪問EditorState。

我有點新的反應，但我想我應該把SubmitButton提交事件onClick handler從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> 
    ); 
} 
...