Redux-Form und React-RTE - Save RTE editorValue um den Status zu bilden?

Question

Ich bin ganz neu zu reagieren/Redux und die Werke, so wenden Sie sich bitte hier irgendwelche naiven Annahmen/Fragen entschuldigen ...

Ich habe es geschafft, eine gute Menge an Fortschritte bei der Onboarding-Flow Ich baue zu machen für meine App dank der Dokumentation für redux-form - es ist eine fantastische Bibliothek!

Allerdings habe ich jetzt ein paar Probleme, weil ich versuche, eine Instanz von React-RTE (https://github.com/sstur/react-rte) als benutzerdefinierte Feldkomponente zu übergeben. Ich habe die Dokumentation here verfolgt. Bis jetzt war ich in der Lage, die RTE zu rendern und die editorValue-Prop für die Konsole zu loggen, aber ich kann nicht für das Leben von mir erhalten den Formularwert in den Formularzustand zu speichern. Ich habe diese Frage als ein Problem auf der Redu-Form gitrepo gepostet, aber es ist wahrscheinlich sinnvoll, auch hier zu posten, da andere Probleme mit benutzerdefinierten Feldkomponenten haben könnten. Jede Hilfe würde sehr geschätzt werden!

Hier ist der Code, den ich mit experimentiert habe:

Meine Form-Container (RoleForm.jsx) - ist JDEditor Schnipsel in Frage:

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) 

Und die JDEditor Klasse:

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

So habe ich es gemacht. Ich wollte den Inhalt in Abschlag:

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

window.RichTextEditor = RichTextEditor 

Und dann die Komponente RichTextMarkdown.js.