我怎样才能拿notesFromStore
由 redux
提供进入我的NoteEdit
组件:
function mapStateToProps(state) {
return { notesFromStore: state.notes };
}
并将它们的初始值设置为 <Field name="title">
和<Field name="content">
什么时候安装组件?
class NoteEdit extends Component {
onSumbit(values) {
this.props.createNote(values, () => {
this.props.history.push('/');
});
}
renderField(field) {
const className = `form-group ${field.meta.touched && field.meta.error ? 'has-danger' : ''}`;
return (
<div className={className}>
<label>{field.labelToShow}</label>
<input
className="form-control"
type="text"
{...field.input}
/>
<div className="text-help">
{field.meta.touched ? field.meta.error : ''}
</div>
</div>
);
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.onSumbit.bind(this))}>
<Field
name="title"
labelToShow="Note title"
component={this.renderField}
/>
<Field
name="content"
labelToShow="Note content"
component={this.renderField}
/>
<button type="submit" className="btn btn-primary">Submit</button>
<Link to="/" className="btn btn-danger">Cancel</Link>
</form>
);
}
}
export default reduxForm({
validate: validate,
form: 'NoteNewFormUnique',
})(connect(null, { createNote })(NoteEdit));
屏幕显示 redux mapStateToProps
下发的数据结构
编辑:
感谢:@Ashish Choudhary,它成功了!我将在这里为将来遇到类似问题的人留下我的代码。也许会有帮助。
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
class NoteEdit extends Component {
componentWillReceiveProps(nextProps) {
const { change } = this.props
const values = nextProps.initialValues;
if (values !== null) {
change('title', values.title);
change('content', values.content);
}
}
onSumbit(values) {
this.props.prepareToEdit(values, () => {
this.props.history.push('/');
});
}
renderField(field) {
const className = `form-group ${field.meta.touched && field.meta.error ? 'has-danger' : ''}`;
return (
<div className={className}>
<label>{field.labelToShow}</label>
<input
className="form-control"
type="text"
{...field.input}
/>
<div className="text-help">
{field.meta.touched ? field.meta.error : ''}
</div>
</div>
);
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.onSumbit.bind(this))}>
<Field
name="title"
labelToShow="Note title"
component={this.renderField}
/>
<Field
name="content"
labelToShow="Note content"
component={this.renderField}
/>
<button type="submit" className="btn btn-primary">Submit</button>
<Link to="/" className="btn btn-danger">Cancel</Link>
</form>
);
}
}
function mapStateToProps(state) {
return { initialValues: state.edit };
}
function validate(values) {
const errors = {};
if (!values.title || values.title.length < 2) {
errors.title = 'Enter note title that is at least 2 characters long!';
}
if (!values.content || values.content.length < 3) {
errors.content = 'Enter note content that is at least 3 characters long!';
}
// If errors is empty, the form is fine to submit
// If errors has any properties, it is invalid
return errors;
}
export default reduxForm({
validate: validate,
form: 'NoteNewFormUnique',
})(connect(mapStateToProps, null)(NoteEdit));
最佳答案
准确地说,change
函数是在redux-form
中绑定(bind)数据的最佳方式,因为它可以在类中的任何地方轻松使用......因此有不需要设置表单的初始状态...
class NoteEdit extends Component {
componentWillReceiveProps(nextProps) {
const { change } = this.props
const values = nextProps.initialValues.5931aa20b94dc80011c729d6
change('title', values.title)
}
render() {
const { handleSubmit } = this.props
return (
<form onSubmit={handleSubmit(this.onSumbit.bind(this))}>
<Field
name="title"
labelToShow="Note title"
component={this.renderField}
/>
</form>
)
}
}
关于javascript - 来自 mapStateToProps 的 Redux 形式初始值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44338896/