Redux Form Material UI：选择嵌套列表不起作用

Question

我有一种情况需要显示项目的分组列表：https://v0.material-ui.com/#/components/list（转到嵌套列表）

1. redux-form Select 字段能否使用 <ListItem /> 而不是 <MenuItem /> 的选项？

2. 我无法从嵌套下拉列表中选择任何项目。 Redux 的 onChange 回调没有启动。

代码如下： 表格：

<form>
    <Field
            name="camops"
            normalize={normalizeMultipleSelectValues}
            component={MySelectFormField}
            floatingLabelText="Item(s)"
            fullWidth
            multiple
          />
</form>

组件MySelectFormField：

import get from 'lodash/get';
import groupBy from 'lodash/groupBy';
import isEmpty from 'lodash/isEmpty';
import { List, ListItem } from 'material-ui/List';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
import SelectFormField from './common/SelectFormField';

class MySelectFormField extends Component {
  static propTypes = {
    bookingId: PropTypes.string,
    multiple: PropTypes.bool,
    disabled: PropTypes.bool,
    input: PropTypes.object.isRequired,
    camops: PropTypes.array,
    camopsFetch: PropTypes.func.isRequired,
  };

  static defaultProps = {
    bookingId: null,
    multiple: false,
    disabled: false,
    camops: [],
  };

  componentDidMount() {
    const { camopsFetch } = this.props;

    camopsFetch();
  }

  renderListItems(data) {
    let listItems = null;

    if (!isEmpty(data)) {
      listItems = Object.keys(data).map(region => {
        const count = data[region].length;

        const nestedItems = this.renderNestedListItem(data[region]);

        const primaryText = (
          <Typography variant="h6" component="div">
            {`${region}(${count})`}
          </Typography>
        );

        return (
          <ListItem
            key={region}
            primaryText={primaryText}
            initiallyOpen={true}
            primaryTogglesNestedList={true}
            nestedItems={nestedItems}
          />
        );
      });
    }

    return listItems;
  }

  renderNestedListItem(data) {
    let nestedList = null;

    if (!isEmpty(data)) {
      nestedList = data.map(camop => {
        const uuid = get(camop, 'uuid', '');
        const fullName = get(camop, 'full_name', '');
        const email = get(camop, 'email', '');
        const label = `${fullName} (${email})`.trim();

        let checked = false;
        if (this.props.multiple) {
          checked = this.props.input.value.indexOf(uuid) > -1;
        }

        return <ListItem key={uuid} value={uuid} primaryText={label} checked={checked} />;
      });
    }

    return nestedList;
  }

  render() {
    const { bookingId, disabled, camops, camopsFetch, ...restProps } = this.props;

    const hasCamOps = !!camops && !!camops.length;
    const enabled = !disabled && hasCamOps;
    let groupedCamops = groupBy(camops, 'region');

    // Sort the grouped camops
    groupedCamops = Object.keys(groupedCamops)
      .sort()
      .reduce((r, k) => Object.assign(r, { [k]: groupedCamops[k] }), {});

    const listItems = this.renderListItems(groupedCamops);

    return (
      <SelectFormField {...restProps} disabled={!enabled}>
        <List style={{ maxHeight: '100%', overflow: 'auto' }}>{listItems}</List>
      </SelectFormField>
    );
  }
}

export default MySelectFormField;

组件SelectFormField：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SelectField } from 'redux-form-material-ui';

class SelectFormField extends Component {
  static propTypes = {
    children: PropTypes.node,
    helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    meta: PropTypes.object.isRequired,
    input: PropTypes.object.isRequired,
    isRequired: PropTypes.bool,
  };

  static defaultProps = {
    children: null,
    helpText: null,
    isRequired: false,
  };

  render() {
    const { children, helpText, isRequired, ...restProps } = this.props;

    return (
      <div className="select-form-field">
        <SelectField {...restProps}>{children}</SelectField>

        {!!isRequired && <span className="select-form-field__marker">*&nbsp;</span>}

        {!!helpText && <div className="form-help-text">{helpText}</div>}
      </div>
    );
  }
}

export default SelectFormField;

Answer 1

我使用名为 renderSelectField 的自定义选择字段创建了一个 redux-form 字段。

select中的options项是普通的htmloption：

import { Field, reduxForm } from 'redux-form'

<Field name="type" component={renderSelectField} label="Type">
      {materialTypes.map(materialType => {
        return (
          <option key={materialType} value={materialType}>
            {materialType}
          </option>
        )
      })}
</Field>

renderSelectField:

import SelectField from 'material-ui/Select'
import FormControl from 'material-ui/Form/FormControl'
import InputLabel from 'material-ui/Input/InputLabel'
import { FormHelperText } from 'material-ui'

const renderSelectField = ({
  input,
  label,
  meta: { touched, error },
  children,
  ...custom
}) => (
  <FormControl className="admin-form-field">
    <InputLabel error={touched && error}>{label}</InputLabel>
    <SelectField
      floatingLabelText={label}
      error={touched && error}
      {...input}
      children={children}
      {...custom}
    />
    <FormHelperText error={touched && error}>{error}</FormHelperText>
  </FormControl>
)

不需要redux-form-material-ui。只是redux-form 和material-ui。

希望对您有所帮助。