Javascript 如何使用Redux Form V6创建自定义下拉字段组件？

我有一个应用程序，将是形式沉重的，我希望尽可能多的控制，而使用尽可能少的依赖关系，我可以。为了做到这一点，我想利用redux form v6的自定义字段组件API，并创建一组自定义组件，我可以随意访问这些组件。其中一个组件是下拉选择

问题是自定义下拉组件没有连接到状态，即使它呈现OK

在文档中，示例实现了以下功能：

<Field name="favoriteColor" component="select">
  <option></option>
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</Field>

我正在寻找一种即插即用的方法，在这种方法中，我可以插入一个组件，并向道具中提供一系列数据：

Form.js：

DropDownSelect.js：

当我选中Redux DevTools时，与下拉列表交互时，字段的值永远不会填充：

我为这两个字段都选择了一个值，但只有“effDate”填充一个值，而“dropDownSelect”仍然是一个没有值的注册字段

编辑：

根据这个例子，我想解决这个问题的方法如下：

function DropDownSelect(person) {
  return (
    <option key={person} value={person}>{person}</option>
  );
}

export default DropDownSelect;


      <div className="form-group">
        <label htmlFor="dropDownSelect">Select an Option</label>
        <Field
          name="dropDownSelect"
          component="select"
          // component={DropDownSelect}
          // people={people}
          className="form-control"
        >
          {people.map(DropDownSelect)}
        </Field>

---

目前这是可行的，但如果我能像最初的问题中所述，将其作为一个完全独立的组件来实现，这将是一个理想的选择，这样我就可以利用生命周期挂钩，以防字段依赖于其他字段。

要使单独的自定义组件处理下拉选择，我需要包括“输入”道具，以将其连接到表单缩减器：

自定义组件：

/**
*
* DropDownSelect
*
*/

import React from 'react';

import styles from './styles.css';

class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function

  renderSelectOptions = (person) => (
    <option key={person} value={person}>{person}</option>
  )

  render() {
    const { input, label } = this.props;
    return (
      <div>
        {/* <label htmlFor={label}>{label}</label> */}
        <select {...input}>
          <option value="">Select</option>
          {this.props.people.map(this.renderSelectOptions)}
        </select>
      </div>
    );
  }
}

// function DropDownSelect(person) {
//   return (
//     <option key={person} value={person}>{person}</option>
//   );
// }

DropDownSelect.propTypes = {
  people: React.PropTypes.array,
  input: React.PropTypes.object,
  label: React.PropTypes.string,
};

export default DropDownSelect;

字段：

      <div className="form-group">
        <label htmlFor="dropDownSelect">Select an Option</label>
        <Field
          name="dropDownSelect"
          // component="select"
          label="dropDownSelect"
          component={DropDownSelect}
          people={people}
          className="form-control"
        >
          {/* {people.map(DropDownSelect)} */}
        </Field>
      </div>

---

如何对错误进行自定义渲染。e、 g.添加类似这样的内容以显示输入有错误。{toucted&&error&&error！}如何从中禁用redux中的下拉字段？@BharathMb禁用的道具本机受HTML支持，可以作为任何其他道具放入。在本例中，您可以将disabled作为prop-through字段传入并向下钻取到标记中，如：。。。

/**
*
* DropDownSelect
*
*/

import React from 'react';

import styles from './styles.css';

class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function

  renderSelectOptions = (person) => (
    <option key={person} value={person}>{person}</option>
  )

  render() {
    const { input, label } = this.props;
    return (
      <div>
        {/* <label htmlFor={label}>{label}</label> */}
        <select {...input}>
          <option value="">Select</option>
          {this.props.people.map(this.renderSelectOptions)}
        </select>
      </div>
    );
  }
}

// function DropDownSelect(person) {
//   return (
//     <option key={person} value={person}>{person}</option>
//   );
// }

DropDownSelect.propTypes = {
  people: React.PropTypes.array,
  input: React.PropTypes.object,
  label: React.PropTypes.string,
};

export default DropDownSelect;

      <div className="form-group">
        <label htmlFor="dropDownSelect">Select an Option</label>
        <Field
          name="dropDownSelect"
          // component="select"
          label="dropDownSelect"
          component={DropDownSelect}
          people={people}
          className="form-control"
        >
          {/* {people.map(DropDownSelect)} */}
        </Field>
      </div>