Redux-FormとReact-RTE - RTE editorValueを保存して状態を保存しますか？

Question

私はReact/Reduxとその作品の新作ですので、ここで素朴な仮説/質問を言い訳してください...

私が構築しているオンボーディングフロー私のアプリのために、redux形式のドキュメントのおかげで - それは素晴らしいライブラリです！

しかし、React-RTE（https://github.com/sstur/react-rte）のインスタンスをカスタムフィールドコンポーネントとして渡そうとしているため、いくつかの問題が発生しています。私は文書hereに従っています。これまで私はRTEをレンダリングしてコンソールにeditorValue小道具を記録することができましたが、私の人生にとってフォームの値をフォームの状態に保存することはできません。私はこの質問をredux形式のgitrepoの問題として投稿しましたが、カスタムフィールドコンポーネントに問題があるかもしれないので、ここに投稿するのはおそらく意味があります。どんな助けでも大歓迎です！

ここで私が使って実験してきたコードです：

マイFormコンテナ（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

これは私のやり方です。私はマークダウンの内容を望んでいました：

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

window.RichTextEditor = RichTextEditor 

そして、コンポーネントはRichTextMarkdown.jsです。