Question

我有登录组件。在这里，我使用了redux-form。当我刚起步时，您能帮忙从redux-form获取表单数据（如何提交表单数据）吗？

<form onSubmit={this.onSubmit}>
    <div className="padding5">
        <Field name="email" type="email" component={RenderField} label="Email Id" />
    </div>
    <div className="padding5">
        <Field name="Password" type="Password" component={RenderField} label="Password" />
    </div>

    <div className='buttonSection'>
        <button type="submit" disabled={this.state.errors} className='buttonField padding5'>Reset Password</button>
    </div>
</form>

Answer 1

您的代码看起来不错。您必须使用Form中的redux-form：

import { reduxForm, Form } from 'redux-form';

// Your form component
<Form onSubmit={this.onSubmit}>
  // Your form
</Form>

确保已将redux-form添加到您的redux存储中：

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const combinedReducers = combineReducers({
  form: formReducer
})

并且您正在导出包装好的表格：

import { reduxForm, Form } from 'redux-form';

// Your form

export default reduxForm({
  form: 'name-of-form'
})(MyForm);

Answer 2

首先，您应该使用Form中的redux-form组件

import { reduxForm, Form, Field } from 'redux-form';

另外，当连接到redux-form时，您的组件会收到一个handleSubmit道具，您应该在onSubmit事件监听器中使用它，它应该是：

<Form onSubmit={this.props.handleSubmit(this.onSubmit)} />

然后您的提交按钮将使用字段名称作为键的值的集合来调用this.onSubmit的工作：

onSubmit = values => {
  console.log(values); // => { email: '', password: '' }
}

如何发送redux表单数据

2 个答案: