使用Redux-Form,如何使用相同名称的多个输入？

Question

我正在努力构建下面的redux-form以收集用户输入的电子邮件.这些字段都应该具有相同的名称="email"

问题是当组件呈现时,我聚焦并键入一个字段时,所有字段立即使用第一个输入字段中的最新值更新.这三个领域似乎都捆绑在了一起.

使用redux-form,如何使表单具有相同名称的输入？

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import {connect} from 'react-redux';

class InvitePage extends React.Component {

  handleSubmit(data) {
    console.log(data)
  }

  render() {

    return (
      <div>
        <h1>Invites</h1>
          <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
            <div>
              <label>Email address</label>
              <div>
                <Field
                  name="email"
                  component="input"
                  type="email"
                  placeholder="Email"
                />
              </div>
              <div>
                <Field
                  name="email"
                  component="input"
                  type="email"
                  placeholder="Email"
                />
              </div>
              <div>
                <Field
                  name="email"
                  component="input"
                  type="email"
                  placeholder="Email"
                />
              </div>
            </div>

            <div>
              <button type="submit">Submit</button>
            </div>

          </form>
      </div>
    );
  }

}

InvitePage = reduxForm({
  form: 'InvitePage'
})(InvitePage);

export default InvitePage;

Answer 1

如果你使用的FieldArray是3而不是3 Field秒,它可以处理为每个字段生成redux-form状态的唯一名称,你可以使用渲染器硬编码(或允许你覆盖)name字段到你想要的任何东西,如redux-form onChange为每个字段生成一个处理程序,无论您为该name属性呈现什么,都会更新正确的状态.

这是一个示例,显示在行动中:

• 实时版
• 完整示例源

相关代码段:

// For the sake of this example, we're hard-coding the name to 'email'
let renderEmailField = ({input, label, type, meta: {touched, error}}) =>
  <div>
    <label>{label}</label>
    <div>
      <input {...input} name="email" type="email"/>
      {touched && error && <span>{error}</span>}
    </div>
  </div>

let renderEmails = ({fields, meta: {submitFailed, error}}) =>
  <ul>
    <li>
      <button type="button" onClick={() => fields.push()}>Add Email</button>
    </li>
    {fields.map((email, index) =>
      <li key={index}>
        {index > 2 && <button
          type="button"
          title="Remove Email"
          onClick={() => fields.remove(index)}
        />}
        <Field
          name={email}
          component={renderEmailField}
          label={`Email #${index + 1}`}
        />
      </li>
    )}
    {submitFailed && error && <li className="error">{error}</li>}
  </ul>

let EmailsForm = ({handleSubmit, pristine, reset, submitting}) =>
  <form onSubmit={handleSubmit}>
    <FieldArray name="emails" component={renderEmails} />
    <div>
      <button type="submit" disabled={submitting}>Submit</button>
      <button type="button" disabled={pristine || submitting} onClick={reset}>
        Clear Values
      </button>
    </div>
  </form>

EmailsForm = reduxForm({
  form: 'emailsForm',
  // Provide 3 initial values to show 3 email fields
  initialValues: {
    emails: ['', '', '']
  }
})