draft jsデータフローの例

Question

リッチHTMLのフィールドを含む多くのフォームを使用する反応プロジェクトに取り組んでいます。私はしばらくの間捜索し、下書きを見つけました。それは非常に良いようですが、私はそれを最初から最後までどのように使うのかの良い例は見つけられないようです。私が見つけたもののほとんどは、コントロールを変更する方法ですが、それは私が探しているものではありません。その基本的な機能は私が今必要とするものです。

私はそれを手に入れて、自分のフォームで作業しています。私が望むコントロールなどがありますが、そこからどこに行くのか分かりません。私の構造はこのようになります

：

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

私はEditorState、convertToRawなどに見てきましたが、私の提出イベントからEditorStateにアクセスする方法を見つけ出すことはできません。

少し新しく反応しましたが、私はSubmitButtonにサブミットイベントをonClick handlerに入れてFormContainerから引き渡すべきだと考えています。

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