반응 js의 상태 업데이트

Question

이 코드는 재질 ui의 드롭 다운 구성 요소를 렌더링하며 WS에서 오는 데이터로 채워집니다.

WS에서 오는 firs 요소 인 초기 값을 설정 했으므로 페이지를 처음 렌더링 할 때 드롭 다운에서 올바른 값을 볼 수 있습니다.

내 문제는 드롭 다운에서 다른 값을 선택하려고 할 때 내가 할 수없고 상태를 업데이트하지 않기 때문에 "handleChange"라는 메서드가 있지만 그곳에 무언가를 놓치고 있지만 무엇을 모르겠다.

이것은 코드이며 다른 사람이이 문제를 해결할 수 있기를 희망합니다.

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

도움이 될 것입니다! 미리

감사 .. 재료 UI 드롭에서

Answer 1

는, 선택된 값은 제 인자로 보인다. 그래서 handleChange 방법이 같은 것을 사용

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

참조 : 당신의 시간을 http://www.material-ui.com/#/components/dropdown-menu#properties