Обновление состояния в родительском с состоянием редактора черновиков?

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