[英]Redux-Form and React-RTE - Save RTE editorValue to form state?
I'm brand new to React/Redux and the works, so please excuse any naive assumptions/questions here... 我是React / Redux和这些作品的新手,所以请原谅这里任何幼稚的假设/问题...
I've managed to make a good amount of progress in the onboarding flow I'm building for my app thanks to the documentation for redux-form - it's a fantastic library! 借助redux-form的文档,我在为我的应用程序构建的入职流程中已取得了很大的进步-这是一个很棒的库!
However, I'm now running into a few issues because I'm trying to pass an instance of React-RTE ( https://github.com/sstur/react-rte ) as a custom Field component. 但是,我现在遇到了一些问题,因为我试图将React-RTE的实例( https://github.com/sstur/react-rte )作为自定义字段组件传递。 I've been following the documentation here .
我一直在关注这里的文档。 So far I've been able to render the RTE and log the editorValue prop to the console, but I can't for the life of me get the form value to save to the form state.
到目前为止,我已经能够渲染RTE并将editorValue属性记录到控制台,但是我一生都无法将表单值保存到表单状态。 I asked posted this question as an issue on the redux-form gitrepo, but it probably makes sense to post here as well, as others may be having issues with custom Field Components.
我问过这个问题是在redux形式的gitrepo上发布的一个问题,但是也可以在这里发布,因为其他人可能对自定义字段组件有问题。 Any help would be much appreciated!
任何帮助将非常感激!
Here's the code I've been experimenting with: 这是我一直在尝试的代码:
My Form container (RoleForm.jsx) - snippet in question is JDEditor: 我的表单容器(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)
And the JDEditor class: 和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);
}
}
}
}
This is how I have done it. 这就是我所做的。 I wanted the content in markdown:
我想要markdown中的内容:
// in client side entry file
import RichTextEditor from 'react-rte'
window.RichTextEditor = RichTextEditor
And then the component is RichTextMarkdown.js . 然后该组件是RichTextMarkdown.js 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.