Question

是否有一种方法可以将默认值加载到redux表单中。我有主要组件中的值，例如topicName和topicDescription。当我单击并路由到redux表单进行编辑时，我希望这些值已经加载以进行编辑，我应该只附加数据，在onSubmit上，应将新值加载到表单中。谢谢

 class EditRow extends React.Component{
        constructor(props){
            super(props)

            this.state={
                topicName:this.props.location.state.topicName,
                topicDescription:this.props.location.state.avgGrade
            }
            this.onSubmit=this.onSubmit.bind(this)
        }

        renderTextField(field){
            return(
                <div className="form-group">
                    <label>{field.label}</label>
                    <input
                        className="form-control"
                        type="text"
                        placeholder={field.placeholder}
                        {...field.input}
                        required
                    />
                </div>
            )
        }
        onSubmit(values){
            this.props.editRow(values, () => {
                this.props.history.push({pathname:'/Topics/'+ this.props.match.params.editId +'/'+ this.props.match.params.categoryId+'/id/'+this.props.match.params.userName,
                    state:{description:this.props.location.state.description,dateTime:this.props.location.state.dateTime,topicName:this.props.location.state.topicName}} );
            },this.props.match.params.objectId);
        }
        render(){

            const {handleSubmit}=this.props;

            const editrow={
                backgroundColor: "white",
                padding: "50px",
                boxShadow: '0 0 7px 1px rgba(0,0,0,0.1)',
                minWidth: '100px',
                maxWidth: '95%',
                margin: "150px auto 50px auto"
            }
            return(
                <form style={editrow} onSubmit={handleSubmit(this.onSubmit)}>
                    <Field
                        label={"Topic Name"}
                        placeholder={"Enter the Name"}
                        name="name"
                        component={this.renderTextField}
                    />
                    <Field
                        label={"Average Grade"}
                        placeholder={"Enter the Average grade"}
                        name="avgGrade"
                        component={this.renderTextField}
                    />
                    <button className="btn btn-primary btn-right">Edit</button>
                </form>
            );
        }
    }

Answer 1

您应该将initialValues属性传递到表单中，如documentation中所述：

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
InitializeFromStateForm = reduxForm({
  form: 'initializeFromState' // a unique identifier for this form
})(InitializeFromStateForm)

// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
  state => ({
    initialValues: {
      topicName: state.location.state.topicName,
      topicDescription: state.location.state.avgGrade
    }
  })
)(InitializeFromStateForm)

export default InitializeFromStateForm

Answer 2

添加此命令后，可以按照以下语法初始化状态。我得到了想要的输出。

 const mapStateToProps = (state,ownProps) => {
         return { initialValues: {name:ownProps.location.state.topicName, Description:ownProps.location.state.Description}}
    };

    EditRow  = reduxForm({
        validate,
        form: 'EditForm',
        enableReinitialize: true,
    })(EditRow );

    EditRow  = connect(
        mapStateToProps,
        {
         editRow
        },
    )(EditRow );

    export default withRouter(EditRow );

如何将另一个组件中的值填充到redux表单中？

2 个答案: