具有自创建输入的 Redux 表单

Question

我正在尝试创建一个可以动态创建自己的输入的 redux 表单（使用 redux-form）。我无法弄清楚如何让 redux-form 知道已创建的新字段。是否可以动态更改 redux-form 在表单组件本身中传入的 fields prop？我在想这个错误吗？这是我正在处理的内容。

class AddCustomer extends Component {

 render() {

  class Form extends Component {

    constructor(props, context) {
      super(props, context)
      this.state = {
        inputsToAdd: []
      };
    }

    handleAddInput() {
       let inputsToAdd = this.state.inputsToAdd.slice();
       inputsToAdd.push(this.state.inputsToAdd.length);
       this.setState({ inputsToAdd });
    }

    submitForm(data) {
       console.log(data)
       this.setState({inputsToAdd: []});
       this.props.dispatch(initialize('addCustomer', {}))
    }

    render() {
      const { fields, handleSubmit } = this.props;
      return (
          <div>
            <form onSubmit={handleSubmit(this.submitForm.bind(this))}>
              <Input type='text' label='Company name' {...fields['companyName']}/>
              <Input type='email' label='Admin user email' {...fields['adminEmail']}/>
            </form>
            {this.state.inputsToAdd.map((element, index) => {
              return (
                <Input key={index} type='text' />
              )
            })}
            <Button onClick={() => this.handleAddInput()}>Add Input</Button>
            <Button onClick={handleSubmit(this.submitForm.bind(this))}>Submit</Button>
          </div>
        )
      }
    }

    Form = connectReduxForm({
      form: 'addCustomer',
      fields: ['companyName', 'adminEmail']
    })(Form);

    return (
      <div>
        <h1>Add Customer</h1>
        <Form />
      </div>
    )
  }
}

Answer 1

从 Redux Form 6.* 开始，您可以使用 <FieldArray/>

实现您想要做的事情

参见下面的示例（取自 Redux 文档并稍作简化）

import React from 'react'
import { Field, FieldArray, reduxForm } from 'redux-form'
import validate from './validate'

const renderMembers = ({ fields, meta: { touched, error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>Add Member</button>
      {touched && error && <span>{error}</span>}
    </li>
    {fields.map((member, index) =>
      <li key={index}>
        <button
          type="button"
          title="Remove Member"
          onClick={() => fields.remove(index)}/>
        <h4>Member #{index + 1}</h4>
        <Field
          name={`${member}.firstName`}
          type="text"
          component={renderField}
          label="First Name"/>
        <Field
          name={`${member}.lastName`}
          type="text"
          component={renderField}
          label="Last Name"/>

      </li>
    )}
  </ul>
)


const FieldArraysForm = (props) => {
const { handleSubmit, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <FieldArray name="members" component={renderMembers}/>
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'fieldArrays',     // a unique identifier for this form
  validate
})(FieldArraysForm)

有关更多信息，请查看文档 http://redux-form.com/6.1.1/examples/fieldArrays/

具有自创建输入的 Redux 表单

Redux form with self creating inputs

reactjs

redux

redux-form