使用 Material UI 中的 Dropdown 组件在 React JS 中设置和更新状态答案

【问题标题】：Setting and updating state in React JS with Dropdown component from Material UI使用 Material UI 中的 Dropdown 组件在 React JS 中设置和更新状态
【发布时间】：2017-11-21 00:14:03
【问题描述】：

我有这段代码调用 Web 服务并将来自该 WS 的名称显示到 Material UI 的下拉组件中，

我想要做的是使用来自 WS 的第一个元素设置下拉列表的默认值，并且还能够选择下拉列表中的任何选项，我阅读了一些关于“State”的内容>”，但在代码级别上做得并不好。

我是 React 的新手，并且是自学的，但可以提供一些帮助。

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

    export default class WebserviceTest extends Component {

      constructor(props) {
        super(props);
        this.state = {
        data: [],
       };
       this.renderOptions = this.renderOptions.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
         });
       });
    }
    //will set wahtever item the user selects in the dropdown
    handleChange(event, index, value) {this.setState({ value });}
    //we are creating the options to be displayed
    renderOptions() {
     return this.state.data.map((dt, i) => {
       return (
         <div key={i}>
           <MenuItem
             label="Select a description"
             value={dt.name.first}
             primaryText={dt.name.first} />
         </div>
       );
     });
    }

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

提前致谢。

问候。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

您需要设置所选下拉选项的状态。并将数据的第一个值设置为选定值。

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 // need to be sure it's exist
     });
   });
}
handleChange(event, index, value) {this.setState({ selected: value });}
.
.
.
render() {
 return (
   <div>
     <DropDownMenu value={this.state.selected} onChange={this.handleChange}>
       {this.renderOptions()}
     </DropDownMenu>
   </div>
 );

}

更新代码

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);
        console.log(findResponse.results[0].name.first);
        this.setState({
          data: findResponse.results,
          selected: findResponse.results[0].name.first // need to be sure it's exist
        });
      });
  }
  handleChange(value) {this.setState({ selected: value });}

  //we are creating the options to be displayed
  renderOptions() {
    return this.state.data.map((dt, i) => {
      return (
        <div key={i}>
          <MenuItem
            value={dt.name.first}
            primaryText={dt.name.first} />
        </div>
      );
    });
  }

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

【讨论】：

您好，感谢您抽出宝贵时间，我尝试了这个解决方案，但是在渲染页面时下拉菜单仍然空白，关于这个“selected: findResponse.results[0].name.first”我很确定它存在是因为我正在从 findResponse 在控制台中打印结果，并且我可以看到我从 WS 调用的 4 个元素。
完成，我更新问题并添加更新的代码。再次感谢
哦，我发现了一个问题。您已将 MenuItem 值更改为 this.state.selected！ this.state.selected 表示当前选择的值。所以MenuItem的值应该是你原来设置的变量（dt.name.first）。
对不起，刚刚进行了更新...但即使使用 setState.selected 行为是相同的，不要显示名字，如果我尝试选择另一个选项，下拉菜单永远不会关闭。 .
你绑定handleChange了吗？你能告诉我更新的代码吗？

【解决方案2】：

this.setState 以特殊方式控制变量this.state。每当您使用this.setState 时，它将再次运行render 以检查相应的更改。您想要响应的动态内容应放在this.state 中，并且应显示在您的render 函数中。

有很多方法可以解决您的问题，但最重要的使用原则是将您当前要渲染的内容（或 id/索引号）放入 this.state 并使用 this.setState 更改它根据需要。

value={this.state.name} 应该是您从fetch 返回的数据结构中的单个值，假设这是屏幕上显示的内容。

另外，您忘记在构造函数中使用bind this.handleChange。

在你的构造函数中声明props 是完全可以的。仅当您想在构造函数中使用 this.props 中的某些内容时才这样做。你不是，所以将其保留为 constructor() 和 super() 是完全安全的

【讨论】：