Question

我有这样的代码，它从材料ui呈现一个下拉组件，并且它填充了来自WS的数据。

我设置了一个初始值，它是来自WS的第一个元素，所以当我第一次渲染页面时，我可以在下拉列表中看到正确的值。

我的问题是，当我尝试在下拉列表中选择不同的值时，我无法做到这一点，我认为是因为我没有更新状态，我有一个名为＆＃的方法34; handleChange＆＃34;但我在那里遗漏了一些东西，但不知道是什么。

这是代码，并希望有人可以帮助解决这个问题，我是新人做出反应并且还要继续练习。

import React, { Component } from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

export default class WebserviceTest extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      selected: ''
    };
    this.renderOptions = this.renderOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    const url = 'https://randomuser.me/api/?results=4';

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

        this.setState({
          data: findResponse.results,
          selected: findResponse.results[0].name.first
        });
        console.log('----- ', this.setState.selected);
      });
  }

  handleChange(value) {
    this.setState({ selected: (value) });
  }

  renderOptions() {
    return this.state.data.map((dt, i) => {
      return (
          <MenuItem
            key={i}
            value={dt.name.first}
            primaryText={dt.name.first} />
      );
    });
  }

  render() {
    return (
      <div>
        <DropDownMenu value={this.state.selected} onChange={this.handleChange}>
          {this.renderOptions()}
        </DropDownMenu>
      </div>
    );
  }
}

非常欢迎任何帮助！

提前致谢..

Answer 1

在素材UI下拉列表中，所选值显示为第三个参数。因此，对handleChange方法

使用类似的内容

handleChange(event, index, value) {
 this.setState({ selected: (value) });
}

参考：http://www.material-ui.com/#/components/dropdown-menu#properties

在react js中更新状态

1 个答案: