Question

我有2个redux表单组件，第一个是 LoginFormComponent ，这是一个带有表单名称＆＃39; submitValidation ＆＃39;

的redux表单

LoginFormComponent = reduxForm({
  form: 'submitValidation'
})(LoginFormComponent)

此表单组件具有如下输入字段： -

<Field name="userid" size="22" placeholder="Personal ID" 
maxLength="22" component="input" type="text"/>

在表单提交上，我想导航到第二个redux表单组件 VerifyLoginBodyComponent ，并希望显示提交的＆＃34; userid＆＃34;从div中的第一个组件开始，如下所示： -

<div className="tieringElement">
       You are logging in as:&nbsp;&nbsp;<b>{userid}</b>
</div>

这是我在第一个表单组件中处理提交的方式

    class LoginFormComponent extends Component {
            constructor(props){
                super(props);
                this.submit=this.submit.bind(this);
            }
            submit(values) {
                console.log(JSON.stringify(values));
                this.context.router.push('/verify');

            }
           render(){
             const { handleSubmit } = this.props
             return(
               <form onSubmit={handleSubmit(this.submit)} id="loginform">
                 <Field name="userid" size="22" placeholder="Personal ID" maxLength="22" component="input" type="text"/>
              </form>
            )
    }

LoginFormComponent = reduxForm({
  form: 'submitValidation'
})(LoginFormComponent)

export default LoginFormComponent;

这是我的redux商店：

const INITIAL_APP_STATE = {
    form: {
        submitValidation: {
            userid: ''
        }
    }
};

如何从VerifyLoginBodyComponent内的LoginFormComponent访问提交的用户ID？

我检查了https://redux-form.com/6.5.0/examples/selectingFormValues/，Redux-form handleSubmit: How to access store state?和redux-form : How to display form values on another component，但仍然无法在第二种表单组件中显示用户ID。

请提供任何建议。

Answer 1

redux-form提供了formValueSelector，您可以使用它来创建从redux存储中检索表单值的选择器。您可以在mapStateToProps的{{1}}函数中起诉。

示例：

VerifyLoginBodyComponent

这当然取决于在提交成功之前不会从商店中清除表单值的事实。

希望这有帮助！

redux表单更新状态和检索

1 个答案: