使用材料 ui v1.0 beta 26 的下拉组件出错

Question

我正在使用 Material UI v1.0 beta.26，我遇到了下拉组件的问题，在这个新版本中，您必须使用 Select 组件和 MenuItem。

我的下拉列表在应用程序渲染时填充，但是当我从中选择任何选项时，我收到以下错误：

这是我的代码：

import React from 'react';
import Select from 'material-ui/Select';
import {MenuItem, MenuIcon} from 'material-ui/Menu';

//CONSTANTS
import {CREATE_LS_DISCOUNT_TYPE_DD} from './commons/constants';
import {CREATE_LS_OFFER_TYPE_DD} from './commons/constants';

import cr from '../styles/general.css';


export default class ExampleDropDown extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      DiscountTypeData: [],
      OfferTypeData: [],
      DiscountTypeState: '',
      OfferTypeState: ''
    };

    this.renderDiscountTypeOptions = this.renderDiscountTypeOptions.bind(this);
    this.renderOfferTypeOptions = this.renderOfferTypeOptions.bind(this);

    this.handleChangeDiscountType = this.handleChangeDiscountType.bind(this);
    this.handleChangeOfferType = this.handleChangeOfferType.bind(this);

  }

  componentDidMount() {

    fetch(CREATE_LS_DISCOUNT_TYPE_DD)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          DiscountTypeData: findResponse.discountTypes,
        });
      });
  }

  handleChangeDiscountType(event, index, value) {
    this.setState({ DiscountTypeState: (value)});

    fetch(CREATE_LS_OFFER_TYPE_DD)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          OfferTypeData: findResponse.offerTypes
        });
      });
  }

  handleChangeOfferType(event, index, value) {
    this.setState({ OfferTypeState: event.target.value });
  }

  renderDiscountTypeOptions() {
    return this.state.DiscountTypeData.map((dt) => {
      return (
        <MenuItem
          key={dt.id}
          value={dt.text}>
          {dt.text}
        </MenuItem>
      );
    });
  }

  renderOfferTypeOptions() {
    return this.state.OfferTypeData.map((dt) => {
      return (
        <MenuItem
          key={dt.offerTypeCode}
          value={dt.offerTypeDesc}>
          {dt.offerTypeDesc}
        </MenuItem>
      );
    });
  }

  render() {

    return (

      <div className={cr.container}>
        <div>
          <Select

            value={this.state.DiscountTypeState}
            onChange={this.handleChangeDiscountType}>
            {this.renderDiscountTypeOptions()}

          </Select>
        </div>
        <br/>
        <div>
          <Select

            value={this.state.OfferTypeState}
            onChange={this.handleChangeOfferType}>
            {this.renderOfferTypeOptions()}

          </Select>
        </div>
      </div>

    );
  }

}

在以下方法 (handleChangeDiscountType) 中，如果我将其保留为“this.setState({ DiscountTypeState: value})”，则在上面的屏幕截图中出现错误，但如果我更改该行这个 "this.setState({ DiscountTypeState: event.target.value}) 它有效，所以我想了解原因

  handleChangeDiscountType(event, index, value) {
    this.setState({ DiscountTypeState: value});

    fetch(CREATE_LS_OFFER_TYPE_DD + 1)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          OfferTypeData: findResponse.offerTypes
        });
      });
  }

我还想做的是获取我的选择的索引，以便将它传递给我的第二个 Web 服务调用，但我不知道该怎么做，在以前版本的 Material UI 中我只是放了“ index”并且可以工作，但在新版本中不起作用，所以我想知道一种添加该参数的新方法。

fetch(CREATE_LS_OFFER_TYPE_DD + PASS INDEX HERE)
  .then(Response => Response.json())
  .then(findResponse => {
    console.log(findResponse);

    this.setState({
      OfferTypeData: findResponse.offerTypes
    });
  });

我会很感激这方面的任何帮助..

Answer 1

提供给Select 的onChange 处理程序是用一个丰富了value 和name 的目标调用的，因此您需要从event.target 中提取值：

handleChangeDiscountType(event) {
  const {
    DiscountTypeData
  } = this.state;

  // you're using the text property as the value, but you should probably use its id
  // still, here's how you'd find the item using the selected item's value
  const selectedDiscount = DiscountTypeData.filter(
    discount => discount.text === event.target.value,
  );

  // use a templated literal to specify the endpoint with the selected item's id
  fetch(`${CREATE_LS_OFFER_TYPE_DD}/${selectedDiscount.id}`)
    .then(Response => Response.json())
    .then(findResponse => {
      console.log(findResponse);

      this.setState({
        OfferTypeData: findResponse.offerTypes,
      });
    });
}

您的代码不工作的原因是因为onChange 没有使用第三个参数调用，所以您使用value 将状态设置为undefined。

有关详细信息，请参阅Selects demo。