Aktualisierender Status im übergeordneten Zustand des Entwurfseditors?

Question

Ich habe einen Draftjs-Editor in einem Formular mit anderen Feldern. Der Status für alle diese Felder wird in dieser übergeordneten Komponente gesteuert. Wie bekomme ich vom Entwurfseditor das gleiche Verhalten wie von den regulären HTML-Formularfeldern, in denen der Elternstatus aktualisiert wird?

Regular Eingang:

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

Entwurf js Editor:

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

Auf den Wechsel-Handler:

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

Answer 1

Sie können einfach tun: In parent: (nicht, dass ich Fügen Sie die update={ this.update } Requisiten)

hinzu

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

Im Editor:

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

Dies wird die update() Funktion des Mutter nennen, ist es das, was Sie suchen?

Edit:

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') 
);