使用 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 Fields，它可以处理在 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: ['', '', '']
  }
})

使用 Redux-Form，如何让多个输入同名？

With Redux-Form, how to have multiple inputs with the same name?

reactjs

redux

redux-form

react-redux