Javascript 使用material ui v1.0 beta 26的下拉组件出错

我使用的是Material UI v1.0 beta.26，我面临下拉组件的问题，在这个新版本中，您必须使用与MenuItem组合的Select组件

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

这是我的代码：

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>

    );
  }

}

另外，我想做的是获取我所选内容的索引，以便将其传递给我的第二个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
    });
  });

---

我将非常感谢您在这方面提供的任何帮助。

提供给

Select

的

onChange

处理程序是通过一个目标调用的，该目标使用

value

和

name

，因此您需要从

事件中提取值。target

：

handleChangeDiscountType（事件）{
常数{
折扣类型数据
}=本州；
//您正在使用text属性作为值，但可能应该使用其id
//不过，下面是使用所选项目的值查找项目的方法
const selectedDiscount=折扣类型data.filter(
折扣=>折扣.text==事件.target.value，
);
//使用模板文本指定具有选定项id的端点
fetch（`CREATE\u LS\u OFFER\u TYPE\u DD}/${selectedDiscount.id}`）
.then（Response=>Response.json（））
。然后（findResponse=>{
console.log（findResponse）；
这是我的国家({
OfferTypeData:findResponse.offerTypes，
});
});
}

代码不起作用的原因是，

onChange

没有使用第三个参数调用，因此您使用的

value

将状态设置为

undefined

---

有关更多信息，请参阅。

谢谢您的时间，肯，还有一个问题。。。正如您在Fetch方法中所看到的，我添加了一个“1”，但这是经过harcoded的，在material ui的早期版本中，我只是添加索引作为参数，而不是1，我放置索引，但是如果我这样做，我将在我的web服务URL中获取和未定义，如下所示：“因此，根据索引的不同，最后的值和返回的信息是不同的……首先，您将使用设置为数组索引的键呈现MenuItems，这是一种反模式，因此您应该找到这些项的唯一键。不过，如果您确实需要数组索引，可以使用

array.prototype.findIndex

查找与

event.target.value

匹配的项，但是如果数组中存在重复项，则此方法很脆弱。所以我这样做不对吗？因为在示例中，每个下拉列表上的选项都是硬编码的，所以我没有找到任何动态示例，您建议如何使其正确。很抱歉问了这么多问题，但我是新来的反应，这要看情况而定。您从哪里获取下拉列表的数据？是否有任何唯一标识符可用作密钥？如果是这样，请使用它。我更新了代码和我使用密钥的方式，数据来自这样的web服务“0:{id:1，text:“折扣（磅）”}”，所以现在在代码中我做了类似“key={dt.id}”的东西，但仍然不知道如何将该id或密钥传递到这行“fetch（CREATE_LS_OFFER_TYPE_DD+1）”而不是对数字1进行编码。

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

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