初始化动态创建的 redux-form 字段

Sankar 发表于 Dev

桑卡尔

我有一个动态创建的 redux-form 字段。例如，当我单击一个按钮时，我会执行以下操作：

renderFormFields() {
 const r = someArray.map(s => {
   console.log(s.Value);
   return (<Field name={s.Name} type='number' component='input' min='1' {...s.Value} />);
 })

 {r}
}

render() {
 renderFormFields()
}

现在console.log正在打印正确的值，s.Value但 redux-form 元素没有正确的值。该值empty是呈现输入字段的时间。知道在动态创建 redux-form 字段时我可以做什么来初始化它吗？（我不能使用文档中提到的 handleInitialize 函数方法，因为表单字段是在运行时动态生成的）

瓦伦库马尔·纳加拉詹

Field组件不包含value道具。您可以使用几个选项设置默认值：

initialValues （如果您知道将要动态添加的字段的默认值）
使用this.props.change（如果默认值也是动态的）

来自 redux-form 的 SimpleForm 示例的修改版本：

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

const extendedFields = [{ name: 'City', value: 'Hyderabad' }, { name: 'Phone', value: 2 }];

class SimpleForm extends React.Component {

  constructor() {
    super();
    this.state = {
      showExtended: false
    };
  }

  addExtendedFields() {
    // Not the best way to handle state. Doing this for simplicity
    this.setState({ showExtended: { initialized: false } });
  }

  renderExtendedFields() {
    const r = extendedFields.map(field => {
      return (
        <div key={field.name}>
          <label>{field.name}</label>
          <div>
            <Field type='text' component='input' {...field} value={field.value} />
          </div>
        </div>
      );
    });

    return r;
  }

  componentDidUpdate() {
    const { showExtended } = this.state;
    if (showExtended && !showExtended.initialized) {
      extendedFields.map(field => {
        this.props.change(field.name, field.value); // Option-2
        return field;
      });
      this.setState({ showExtended: { initialized: true } });
    }
  }

  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    const { showExtended } = this.state;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <div>
            <Field name="firstName" component="input" type="text" placeholder="First Name" />
          </div>
        </div>
        <div>
          <label>Last Name</label>
          <div>
            <Field name="lastName" component="input" type="text" placeholder="Last Name" />
          </div>
        </div>
        <div>
          <label>Email</label>
          <div>
            <Field name="email" component="input" type="email" placeholder="Email" />
          </div>
        </div>
        <div>
          <label>Sex</label>
          <div>
            <label><Field name="sex" component="input" type="radio" value="male" /> Male</label>
            <label><Field name="sex" component="input" type="radio" value="female" /> Female</label>
          </div>
        </div>
        <div>
          <label>Favorite Color</label>
          <div>
            <Field name="favoriteColor" component="select">
              <option></option>
              <option value="ff0000">Red</option>
              <option value="00ff00">Green</option>
              <option value="0000ff">Blue</option>
            </Field>
          </div>
        </div>
        <div>
          <label htmlFor="employed">Employed</label>
          <div>
            <Field name="employed" id="employed" component="input" type="checkbox" />
          </div>
        </div>
        {showExtended && this.renderExtendedFields()}
        <div>
          <label>Notes</label>
          <div>
            <Field name="notes" component="textarea" />
          </div>
        </div>
        <div>
          <button type="submit" disabled={pristine || submitting}>Submit</button>
          <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
          <button type="button" onClick={this.addExtendedFields.bind(this)} disabled={showExtended}>Show Extended fields</button>
        </div>
      </form>
    );
  }
}

let HOCSimpleForm = reduxForm({
  form: 'simple'
})(SimpleForm);

HOCSimpleForm = connect(
  state => ({
    initialValues: { City: 'Test' } // Option-1
  })
)(HOCSimpleForm)

export default HOCSimpleForm;

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。