javascript - 使用material 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 .