Redux-Form和React-RTE-保存RTE editorValue到表單狀態？

Question

我是React / Redux和這些作品的新手，所以請原諒這里任何幼稚的假設/問題...

借助redux-form的文檔，我在為我的應用程序構建的入職流程中已取得了很大的進步-這是一個很棒的庫！

但是，我現在遇到了一些問題，因為我試圖將React-RTE的實例（ https://github.com/sstur/react-rte ）作為自定義字段組件傳遞。 我一直在關注這里的文檔。 到目前為止，我已經能夠渲染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);
      }
    }
  } 
}

Answer 1

這就是我所做的。 我想要markdown中的內容：

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

window.RichTextEditor = RichTextEditor

然后該組件是RichTextMarkdown.js 。