Question

我在一个包含其他字段的表单中有一个Draftjs编辑器。所有这些字段的状态在该父组件中受到控制。如何从草稿编辑器中获取与更新父状态的常规HTML表单字段相同的行为？

常规输入：

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

选秀编辑：

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

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

1 个答案: