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

Question

我有一个形式繁重的应用程序,我希望尽可能多地控制,同时使用尽可能少的依赖项.为此,我想利用redux-form v6的自定义Field组件API,并制作一堆我可以随意放入的自定义组件.其中一个组件是下拉选择.

问题是自定义下拉组件未连接到状态,即使它呈现正常.

在文档中,示例完成此操作:

<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:

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

DropDownSelect.js:

import React from 'react';

import styles from './styles.css';

class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
  renderSelectOptions = (person) => {
    return (
      <option key={person} value={person}>{person}</option>
    );
  }

  render() {
    return (
      <select>
        {this.props.people.map(this.renderSelectOptions)}
      </select>
    );
  }
}


export default DropDownSelect;

当我检查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>

这暂时适用,但如果我可以将它作为一个完全独立的组件实现(如初始问题中所述),那将是理想的,所以我可以利用生命周期钩子,在该字段依赖于其他字段的情况下.

Answer 1

要创建处理下拉选择的单独自定义组件,我需要包含'input'道具以将其连接到表单reducer:

自定义组件:

/**
*
* 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>