javascript - Redux-Form和React-RTE-保存RTE editorValue到表单状态？

我是React / Redux和这些作品的新手，所以请原谅这里任何幼稚的假设/问题...

感谢redux-form的文档，在为我的应用程序构建的入职流程上，我已经取得了很大的进步-这是一个很棒的库！

但是，我现在遇到了一些问题，因为我试图将React-RTE（https://github.com/sstur/react-rte）实例作为自定义Field组件传递。我一直在遵循文档here。到目前为止，我已经能够渲染RTE并将editorValue属性记录到控制台，但是我一生都无法将表单值保存到表单状态。我问过这个问题是否是Redux形式的gitrepo上的问题，但也可能在这里发布是有意义的，因为其他人可能对自定义字段组件有问题。任何帮助将非常感激！

这是我一直在尝试的代码：

我的表单容器（RoleForm.jsx）-有问题的代码段是JDEditor：

import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
import validate from './validate.jsx'
import renderField from './renderField.jsx'
import JDEditor from './JDEditor.jsx'

const renderError = ({ meta: { touched, error } }) => touched && error ?
  <span>{error}</span> : false

class RoleForm extends React.Component {
   constructor(props) {
        super(props);
    }

    handleChange(editorValue){
      console.log("CHANGE | EditorValue: " + editorValue)
    }

    handleBlur(editorValue){
      console.log("BLUR | EditorValue: " + editorValue)
    }

     handleFocus(editorValue){
      console.log("FOCUS | EditorValue: " + editorValue)
    }

   render(){
    let { handleSubmit, previousPage, company, value} = this.props

    return (
      <div className="login-wrapper">
      <div className="form" style={{borderRadius:4, margin:'0 auto', padding:24, maxWidth:780}}>
      <h3 style={{fontWeight:700}}>Role Details</h3>
      <p>Here's what we were able to pull:</p>
      <form onSubmit={handleSubmit}>
          <div style={{width:'50%', display:'inline-block'}}><Field name="role" type="text" component={renderField} label="Role"/></div>
          <div style={{width:'50%', display:'inline-block'}}><Field name="role_url" type="url" component={renderField} label="Role Link"/></div>
          <div style={{width:'85%', display:'inline-block', borderBottom:'1px solid'}}></div>
          <label style={{display:'block', textAlign:'left', paddingLeft:'8px'}}>Role Description</label>
          <div style={{display:'inline-block', width:'100%', padding:'0px 8px 8px 8px'}}>
          <Field name="role_description"
            component={props=><JDEditor format={'html'} value={{rte_value:props.editorValue}} onFocus={this.handleFocus.bind(this)} onBlur={this.handleBlur.bind(this)} onChange={this.handleChange.bind(this)} {...props} />} />
          </div>
        <div style={{marginTop:'10px', clear:'both'}}>
          <button type="button" className="btn btn-default" style={{width:'100px', marginRight:'4px'}} onClick={previousPage}>Back</button>
          <button type="submit" className="btn btn-primary" style={{width:'100px'}}>Continue</button>
        </div>
      </form>
      </div>
      <div style={{padding:'100%', background:'#f7f7f7'}}>
      </div>
      </div>
    )
  }
}

export default RoleForm = reduxForm({
  form: 'onboarding',
  destroyOnUnmount: false,
  validate
})(RoleForm)

和JDEditor类：

import React, {Component} from 'react';
import RichTextEditor, {createEmptyValue} from 'react-rte';
import autobind from 'class-autobind';

import type {EditorValue} from 'react-rte';

type Props = {
  value: string;
  format: string;
  onChange: (value: string) => any;
};
type State = {
  editorValue: EditorValue;
};

export default class JDEditor extends Component {
  props: Props;
  state: State;
  // The [format, value] of what's currently displayed in the     <RichTextEditor />
  _currentValue: ?[string, string];

  constructor() {
    super(...arguments);
    autobind(this);
    this.state = {
      editorValue: createEmptyValue(),
    };
  }

  componentWillMount() {
    this._updateStateFromProps(this.props);
  }

  componentWillReceiveProps(newProps: Props) {
    this._updateStateFromProps(newProps);
  }

  _updateStateFromProps(newProps: Props) {
    let {value, format} = newProps;
    if (this._currentValue != null) {
      let [currentValue, currentFormat] = this._currentValue;
      if (format === currentFormat && value === currentValue) {
        return;
      }
    }
    let {editorValue} = this.state;
    this.setState({
      editorValue: editorValue.setContentFromString(value, format),
    });
    this._currentValue = [format, value];
  }

  render() {
    let {value, format, onChange, ...otherProps} = this.props; // eslint-disable-line no-unused-vars
    return (
      <RichTextEditor
        {...otherProps}
        value={this.state.editorValue}
        onChange={this._onChange}
      />
    );
  }

  _onChange(editorValue: EditorValue) {
    let {format, onChange} = this.props;
    let oldEditorValue = this.state.editorValue;
    this.setState({editorValue});
    let oldContentState = oldEditorValue ?     oldEditorValue.getEditorState().getCurrentContent() : null;
    let newContentState = editorValue.getEditorState().getCurrentContent();
    if (oldContentState !== newContentState) {
      let stringValue = editorValue.toString(format);
      // Optimization so if we receive new props we don't need
      // to parse anything unnecessarily.
      this._currentValue = [format, stringValue];
      if (onChange && stringValue !== this.props.value) {
        onChange(stringValue);
      }
    }
  }
}

最佳答案

这就是我所做的。我想要markdown中的内容：

// in client side entry file
import RichTextEditor from 'react-rte'

window.RichTextEditor = RichTextEditor

然后该组件是RichTextMarkdown.js。