ドラフトエディタ状態の親状態を更新していますか？

Question

私は他のフィールドを持つフォームのDraftjsエディタを持っています。そのすべてのフィールドの状態は、その親コン​​ポーネントで制御されています。親フォームを更新する通常のHTMLフォームフィールドと同じように、ドラフトエディタと同じ動作をするにはどうすればよいですか？

正規入力：

<input value={title} type="text" onChange={this.handleChange} name="title" placeholder="Title" id="title" /> 

ドラフトJSエディタ：

<TextEditor placeholder="Write your summary..." value={summary} toolbar /> 

変更ハンドラの場合：

handleChange(event) { 
    this.setState({[`${event.target.name}`]: event.target.value}); 
}; 

Answer 1

あなたが簡単に行うことができます： 親では、（私は持っていないことupdate={ this.update }小道具を追加）

エディタで

… 
render(){ 
    return (
    <input value={title} type="text" onChange={this.handleChange} name="title" placeholder="Title" id="title" update={ this.update }/> 
    ); 
} 

update(editorState){ 
    console.log('update',editorState); 
} 
… 

：

handleChange(event) { 
    this.setState({[`${event.target.name}`]: event.target.value}); 
    this.props.update(this.state); 
}; 

これは、親のupdate()関数を呼び出します、あなたが探しているものということでしょうか？

編集：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Editor, EditorState} from 'draft-js'; 

class Parent extends React.Component { 
… 
    render() { 
     return (
     <div> 
      <form> 
      <MyEditor update={ this.update }> 
      <form> 
     </div> 
    ); 
    } 
    update(editorState) { 
     console.log('editor s state', editorState); 
    } 
… 
} 
// from draft website : 
class MyEditor extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {editorState: EditorState.createEmpty()}; 
    this.onChange = (editorState) => { 
     this.setState({editorState}); 
     this.props.update(this.state); 
    } 
    } 
    render() { 
    return (
     <Editor editorState={this.state.editorState} onChange={this.onChange} /> 
    ); 
    } 
} 

ReactDOM.render(
    <Parent/>, 
    document.getElementById('container') 
);