Reactjs + MaterialUI: Обработка событий SelectField

Question

Я пытаюсь создать свой сайт с помощью ReactJS и MaterialUI. В частности, я пытаюсь создать форму с SelectField. Это выглядело очень просто, но потом я застрял, когда пытался сделать его контролируемым компонентом. Я просто хотел бы, чтобы всякий раз, когда пользователь выбирает элемент в выпадающем списке, этот элемент становится value поля выбора.

Визуализированное поле выбора, как это (websites массив строк):

<SelectField floatingLabelText="Website" onChange={(evt) => this.websiteDidChange(evt)} value={this.state.website} > 
      {websites.map(function(w, index){ 
       return <MenuItem key={index} label={w} value={w}>{w}</MenuItem>; 
      })} 
</SelectField> 

И функция, где я обрабатывать onChange событие:

websiteDidChange(evt) { 
    this.setState({ 
     website: evt.target.value 
    }); 
    } 

Unofrtunately, когда я выбираю элемент, evt.target.value результаты неопределенные. Может ли кто-нибудь увидеть, что мне не хватает? Должен ли я использовать другое свойство из мероприятия? Я не мог понять это из документации.

Answer 1

Я сам нашел ответ: apperently обратный вызов onChange получает два аргумента: событие и вновь выбранный индекс. Так что я обновил код, как показано ниже, и она работает:

websiteDidChange(newIndex) { 
    this.setState({ 
    website: websites[newIndex] 
    }); 
} 

... 

<SelectField floatingLabelText="Website" onChange={(evt, newIndex) => this.websiteDidChange(newIndex)} value={this.state.website} > 
      {websites.map(function(w, index){ 
       return <MenuItem key={index} label={w} value={w}>{w}</MenuItem>; 
      })} 
</SelectField> 

Answer 2

По-видимому, функция OnChange принимает выбранное значение в качестве третьего аргумента, так что вы могли бы использовать, что непосредственно.

Answer 3

Да, третье событие этого значения полезной нагрузки в соответствии с Документами:

http://www.material-ui.com/#/components/select-field

функция обратного вызова вызывается при выборе пункта меню.

Подпись: function (event: object, key: number, payload: any) => void событие: TouchTap-событие, нацеленное на выбранный элемент меню. key: Индекс выбранного пункта меню или неопределенный, если несколько истинно. Полезная нагрузка: если несколько верен, массив значений меню с добавленным значением пункта меню (если он еще не был выбран) или опущен (если он уже был выбран). В противном случае значение элемента меню.

Пример:

<SelectField 
      value={this.props.someValue} 
      onChange={(evt, key, payload)=>console.log(payload)} 
     >