Question

我正在尝试从react-draft-wyswig添加到类型Editor的redux-form字段。正如我从redux-form文档中读取的那样，我需要通过 Field 组件（来自redux-form）中的 value 和 onChange 属性将其连接。 / p>

我构建了具有附加属性 value 的组件，该组件存储了当前wyswig-editor的html代码：

class WYSWIGField extends Component {

constructor(props) {

    super(props);
    this.state = { editorState: EditorState.createEmpty(), value: '' };
    this.onChange = this.onChange.bind(this);
}

onChange(editorState){
    this.setState({ editorState: editorState,
                          value: draftToHtml(convertToRaw(editorState.getCurrentContent()))});
    //console.log(this.state.value);
};

render() {
    return (
        <div>
            <Editor
                editorState={this.state.editorState}
                onEditorStateChange={this.onChange}
            />
        </div>
    );
}
}

我的表单：

  <form onSubmit={handleSubmit(this.props.addPost)}>
      <Field name="editor" component={WYSWIGField}/>
      <button type="submit">Add post</button>
  </form>

导出：

export default connect(null, { addPost })(
               reduxForm({form: "AddPostForm"})(Posts));

和动作creatow，我总是从编辑器接收没有我的值的空对象：

 export function addPost(prop) {

console.log("prop", prop);

return{
    type: ADD_POST,
    payload: prop
};
}

有人可以帮我吗？我在哪里弄错了？

谢谢

将react-draft-wyswig连接到redux-form

0 个答案: