Question

redux-form是一个非常引人注目的库，用于在反应应用程序中为表单提供redux绑定，这应该是非常方便的。不幸的是，使用库自己的例子，我实际上没有绑定任何东西，这非常方便。

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

问题1 ：handleSubmit方法的签名应为handleSubmit(data)。但handleSubmit目前只接收来自提交操作的React syntheticEvent，而且没有数据。（事实上，使用as-written的示例发送了两个单独的事件，似乎是因为表单上的堆叠onSubmit操作和按钮上的onClick。）数据应该在哪里来从，为什么我没有把它传递给处理程序？

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

问题3 ：字段应该自动绑定到onBlur和onChange的处理程序，以便他们适当地更新商店。那永远不会发生。（我们可以看到感谢Redux开发工具。但是，handleSubmit成功调度initialize操作，这表明存储，减速器和其他基本管道都在工作。）

问题4 ：validateContact在初始化时触发一次，但再也没有。

遗憾的是，这对于一个简单的小提琴来说太复杂了，但整个仓库（它只是基本的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道具的组件包裹你的组件，但你自己将它们传递掉了。

尝试这样做（将道具重命名为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。

Answer 2

感谢Jonny Buchanan，他提到了最重要的一点：不要像我一样做，并自动假设如果你的组件需要道具，你必须自己提供。高阶函数connectReduxForm的重点是在包装器组件中提供它们。修复它立即给了我事件处理程序，除了提交之外的所有内容。

另一个重要的疏忽是：

注意 - 如果您没有自己进行连接（），那就是除非你有一个高级用例，否则建议你不要这样做要求它，你必须将减速器安装在形式。

我没有注意到这一点。但是，实现在这里：

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const reducers = {
  // ... your other reducers here ...
  form: formReducer           // <---- Mounted at 'form'
}
const reducer = combineReducers(reducers);
const store = createStore(reducer);

不能在formReducer引用formReducer，但需要语法form: formReducer。这是正确启用handleSubmit的更正。

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

2 个答案: