![](/img/trans.png)
[英]Update initialValues in redux-form asyncronously without using redux
[英]React - redux-form initialValues with draftjs
我正在嘗試使用redux-form在我的應用程序中使用草稿js進行Rich Text Editor,我面臨的問題是我無法從draft-js填充initialValues到編輯器中,我的代碼如下所示
<form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>
<Field
name="websiteurl"
placeholder="INSERT WEBSITE URL HERE"
component={this.renderFieldText}
mandatory='true'
/>
<Field
name="htmlcontent"
placeholder="ENTER HTML CONTENT HERE"
component={this.renderRichTextEditor}
/>
<Button bsStyle="primary" type="submit" className="pull-right" loading={this.state.loading}>Save</Button>
</form>
renderRichTextEditor(field){
return (
<RichTextEditor placeholder={field.placeholder}/>
);
}
renderFieldText(field){
var divClassName=`form-group ${(field.meta.touched && field.meta.error)?'has-danger':''}`;
divClassName = `${divClassName} ${field.bsClass}`;
return(
<div className={divClassName}>
<input
className="form-control"
type={field.type}
placeholder={field.placeholder}
{...field.input}
/>
</div>
);
}
我有兩個字段websiteurl
和htmlcontent
,組件websiteurl
獲取與initialValues稀少,但我沒有得到如何與被使用RichTextEditor組件內實施草案,JS編輯器做..
如果有人實現了這樣的目標,請提供幫助。
謝謝。
我喜歡為Rich Editor的“字段組件”創建一個單獨的組件,以免混淆表單組件。 個人喜好。
<Field name="content" component={EditorField} />
移至EditorField組件...
constructor(props: Props) {
super(props);
// here we create the empty state
let editorState = EditorState.createEmpty();
// if the redux-form field has a value
if (props.input.value) {
// convert the editorState to whatever you'd like
editorState = EditorState.createWithContent(convertFromHTML(props.input.value));
}
// Set the editorState on the state
this.state = {
editorState,
};
}
編寫onChange函數
onChange = (editorState: Object) => {
const { input } = this.props;
// converting to the raw JSON on change
input.onChange(convertToRaw(editorState.getCurrentContent()));
// Set it on the state
this.setState({ editorState });
};
現在在渲染功能中,繼續放置編輯器組件。 傳遞Redux Form輸入道具,您的onChange函數和編輯器狀態。
<Editor
{...input}
onEditorStateChange={this.onChange}
editorState={editorState} />
現在,您可以像通常不使用Draft-js的redux-form一樣設置initialValues。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.