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

Question

我是 React/Redux 及其作品的新手，所以请原谅这里的任何天真的假设/问题......

感谢 redux-form 的文档，我在为应用程序构建的入门流程中取得了很大进展 - 这是一个很棒的库!

但是，我现在遇到了一些问题，因为我正在尝试将 React-RTE ( https://github.com/sstur/react-rte ) 实例作为自定义 Field 组件传递。我一直在关注文档 here 。到目前为止，我已经能够渲染 RTE 并将 editorValue 属性记录到控制台，但我无法将表单值保存到表单状态。我要求将此问题作为 redux-form 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 .