javascript - 如何将 redux-form 绑定(bind)连接到表单的输入

Question

redux-form是一个非常引人注目的库，用于为 React 应用程序中的表单提供 redux 绑定(bind)，这应该非常方便。不幸的是，使用库自己的示例，我无法实际绑定(bind)任何东西，这非常不方便。

我正在尝试使用项目站点上的示例代码，并发现了多个障碍，尽管试图忠实地重现它。我在哪里误解了这个 API？自演示代码编写以来，API 是否发生了变化？我是否遗漏了一些关键且明显的 redux 知识？

问题 1:handleSubmit 方法的签名应为 handleSubmit(data)。但handleSubmit当前仅从提交操作接收React SynthesisEvent，而没有数据。 (事实上​​，使用编写的示例发送两个单独的事件，似乎是因为表单上堆叠的 onSubmit 操作和按钮上的 onClick 操作。)该数据应该来自，为什么我无法将其传递给处理程序？

问题 2:有一个关键的 fields 对象，必须在表单父级上定义并作为表单的 prop 提供。不幸的是，文档中没有解释该 fields 对象的形状，也没有解释其目的。它本质上是最初的“状态”对象吗？一个简单的对象容器，用于 redux-form 在运行时用于错误等？我已经通过将 fields 上的 props 与 connectReduxForm 中的字段名称匹配来停止错误，但由于数据没有绑定(bind)，我假设它不是正确的形状。

问题 3:这些字段应该自动绑定(bind)到 onBlur 和 onChange 的处理程序，以便它们适本地更新存储。那是永远不会发生的。 (感谢 Redux 开发工具，我们可以看到这一点。但是，handleSubmit 成功调度了 initialize 操作，这表明存储、 reducer 和其他基本管道都已完成工作。)

问题 4:validateContact 在 init 时触发一次，但不会再次触发。

不幸的是，这对于一个简单的 Fiddle 来说太复杂了，但是整个存储库(它只是基本的 ReduxStarterApp，加上这个形式的 POC)is available here 。

而且，这是外部组件:

import React       from 'react';
import { connect } from 'react-redux';
import {initialize} from 'redux-form';

import ContactForm from '../components/simple-form/SimpleForm.js';

const mapStateToProps = (state) => ({
  counter : state.counter
});
export class HomeView extends React.Component {
  static propTypes = {
    dispatch : React.PropTypes.func.isRequired,
    counter  : React.PropTypes.number
  }

  constructor () {
    super();
  }
  handleSubmit(event, data) {
    event.preventDefault();
    console.log(event); // this should be the data, but is an event
    console.log(data); // no data here, either...
    console.log('Submission received!', data);
    this.props.dispatch(initialize('contact', {})); // clear form: THIS works
    return false;
  }

  _increment () {
    this.props.dispatch({ type : 'COUNTER_INCREMENT' });
  }


  render () {
    const fields = {
      name: '',
      address: '',
      phone: ''
    };

    return (
      <div className='container text-center'>
        <h1>Welcome to the React Redux Starter Kit</h1>
        <h2>Sample Counter: {this.props.counter}</h2>
        <button className='btn btn-default'
                onClick={::this._increment}>
          Increment
        </button>
        <ContactForm handleSubmit={this.handleSubmit.bind(this)} fields={fields} />
      </div>
    );
  }
}

export default connect(mapStateToProps)(HomeView);

以及内部表单组件:

import React, {Component, PropTypes} from 'react';
import {connectReduxForm} from 'redux-form';

function validateContact(data) {
  console.log("validating");
  console.log(data);
  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;
}

class ContactForm extends Component {
  static propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired
  }

  render() {
    const { fields: {name, address, phone}, handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <label>Name</label>
        <input type="text" {...name}/>     {/* will pass value, onBlur and onChange */}
        {name.error && name.touched && <div>{name.error}</div>}

        <label>Address</label>
        <input type="text" {...address}/>  {/* will pass value, onBlur and onChange*/}
        {address.error && address.touched && <div>{address.error}</div>}

        <label>Phone</label>
        <input type="text" {...phone}/>    {/* will pass value, onBlur and onChange */}
        {phone.error && phone.touched && <div>{phone.error}</div>}

        <button type='submit'>Submit</button>
      </form>
    );
  }
}

// apply connectReduxForm() and include synchronous validation
ContactForm = connectReduxForm({
  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 the wrapped component
export default ContactForm;

Answer 1

connectReduxForm 用另一个组件包装您的组件，该组件处理 fields 和 handleSubmit 属性中的传递，但是您通过传递这些组件将它们吹走他们在你自己身上。

试试这个(将 Prop 重命名为onSubmit):

<ContactForm onSubmit={this.handleSubmit.bind(this)}/>

在 ContactForm 中，pass your own submit handler to the handleSubmit function provided by redux-form :

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

我建议使用React developer tools为了更好地了解正在发生的事情 - 您将看到 redux-form 如何包装您的组件和 passes it a whole bunch of props, as documented in its README .