使用材料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我只是把“索引”和但是在新版本中没有用，所以我想知道添加该参数的新方法。

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

提供给onChange的Select处理程序被一个富含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。