gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 19:09:26 28 4
gpt4 key购买 nike

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

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

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

最佳答案

我是这样做的。我想要 markdown 中的内容:

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

window.RichTextEditor = RichTextEditor

然后组件是RichTextMarkdown.js .

关于javascript - Redux-Form 和 React-RTE - 将 RTE editorValue 保存到表单状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40294295/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com