首页 文章

使用草稿编辑器状态更新父级中的状态？

提问于
浏览 次
0

我在一个包含其他字段的表单中有一个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});
};
reactjs draftjs

1 回答

  • 0

    你可以简单地做：在父母:(不是我已经添加了 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')
);
    回复于

相关问题