我找到了Redux Form包。做得很好！
因此，您可以将Redux与React-
Redux一起使用。
首先，您必须创建一个表单组件（显然）：
import React from 'react';import { reduxForm } from 'redux-form';import validateContact from '../utils/validateContact';class ContactForm extends React.Component { render() { const { fields: {name, address, phone}, handleSubmit } = this.props; return ( <form onSubmit={handleSubmit}> <label>Name</label> <input type="text" {...name}/> {name.error && name.touched && <div>{name.error}</div>} <label>Address</label> <input type="text" {...address} /> {address.error && address.touched && <div>{address.error}</div>} <label>Phone</label> <input type="text" {...phone}/> {phone.error && phone.touched && <div>{phone.error}</div>} <button onClick={handleSubmit}>Submit</button> </form> ); }}ContactForm = reduxForm({ form: 'contact',// the name of your form and the key to // where your form's state will be mounted fields: ['name', 'address', 'phone'], // a list of all your fields in your form validate: validateContact // a synchronous validation function})(ContactForm);export default ContactForm;之后，您将连接处理该表单的组件：
import React from 'react';import { connect } from 'react-redux';import { initialize } from 'redux-form';import ContactForm from './ContactForm.react';class App extends React.Component { handleSubmit(data) { console.log('Submission received!', data); this.props.dispatch(initialize('contact', {})); // clear form } render() { return ( <div id="app"> <h1>App</h1> <ContactForm onSubmit={this.handleSubmit.bind(this)}/> </div> ); }}export default connect()(App);并在合并的reduce中添加redux形式reduce：
import { combineReducers } from 'redux';import { appReducer } from './app-reducers';import { reducer as formReducer } from 'redux-form';let reducers = combineReducers({ appReducer, form: formReducer // this is the form reducer});export default reducers;验证器模块如下所示：
export default function validateContact(data, props) { const errors = {}; if(!data.name) { errors.name = 'Required'; } if(data.address && data.address.length > 50) { errors.address = 'Must be fewer than 50 characters'; } if(!data.phone) { errors.phone = 'Required'; } else if(!/d{3}-d{3}-d{4}/.test(data.phone)) { errors.phone = 'Phone must match the form "999-999-9999"' } return errors;}表单完成后，当您想用一些值填充所有字段时，可以使用以下
initialize函数：
componentWillMount() { this.props.dispatch(initialize('contact', { name: 'test' }, ['name', 'address', 'phone']));}填充表单的另一种方法是设置initialValues。
ContactForm = reduxForm({ form: 'contact',// the name of your form and the key to fields: ['name', 'address', 'phone'], // a list of all your fields in your form validate: validateContact // a synchronous validation function}, state => ({ initialValues: { name: state.user.name, address: state.user.address, phone: state.user.phone, },}))(ContactForm);如果您还有其他解决方法，请留言！谢谢。
