Aktualisiere Zustand in react js

Question

Ich habe diesen Code, der eine Dropdown-Komponente aus Material ui rendert und es ist mit Daten aus einem WS aufgefüllt.

Ich setze einen Anfangswert, der das erste Element von der WS ist, also wenn ich die Seite zum ersten Mal rendere, kann ich den korrekten Wert im Dropdown sehen.

Mein Problem ist, wenn ich versuche, einen anderen Wert in der Dropdown-Liste zu wählen, ich bin nicht in der Lage, es zu tun und ich denke, weil ich den Zustand nicht aktualisieren, habe ich eine Methode namens "handleChange" aber ich Ich vermisse dort etwas, weiß aber nicht was.

Dies ist der Code und hoffe jemand kann dabei helfen, ich bin neu zu reagieren und noch viel mehr zu üben.

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

Jede Hilfe wird sehr willkommen sein!

Vielen Dank im Voraus ..

Answer 1

In Material UI Dropdown-Liste erscheint der gewählte Wert als drittes Argument. So etwas wie diese verwenden für Ihre handleChange Methode

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

Ref: http://www.material-ui.com/#/components/dropdown-menu#properties