Question

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

我想要做的是设置下拉列表的默认值，第一个元素来自WS，也可以选择下拉列表中的任何选项，我读了一些关于＆＃34; 状态的内容＆＃34;但是在代码级别上并没有真正做到这一点。

我是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>
     );
   }
  }

提前致谢。

问候。

Answer 1

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

有很多方法可以解决您的问题，但最重要的原则是将您当前想要呈现的内容（或ID /索引号）放在this.state中并使用{{1}根据需要改变它。

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

另外，您忘记了构造函数中的fetch bind。

在构造函数中声明this.handleChange完全没问题。只有在想要在构造函数中使用props中的内容时，才会执行此操作。您不是，所以将其保留为this.props和constructor()

是完全安全的

Answer 2

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

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>
    );
  }
}

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

2 个答案: