materialui selectField не работает должным образом с формами Redux

Question

Я использую materialUi с избыточной формой, у меня есть следующий код

NumbersSelector.js

import React from 'react';

import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

class NumbersSelector extends React.Component {

  constructor (props) {
    super (props);
    this.state = {
      value: 1
    }
  }

  _renderItems = input => {

    let items = [];

    for (let i = this.props.minValue; i <= this.props.maxValue; i++ ) {
        i!==1
          ?items.push (<MenuItem {...input} key={i} value={i} primaryText={i + ' ' + this.props.pluralText}/>)
          :items.push (<MenuItem {...input} key={i} value={i} primaryText={i + ' ' + this.props.singularText}/>);
    }

    return items;

  }

  render () {

    const { input } = this.props;
    return (
      <SelectField
        name={this.props.name}
        maxSearchResults={this.props.maxSearchResults}
        floatingLabelText={this.props.floatingLabelText}
        hintText={this.props.hintText}

        fullWidth={true}
        floatingLabelFixed={true}

        inputStyle={this.props.inputStyle}
        floatingLabelStyle={this.props.floatingLabelStyle}
        hintStyle={this.props.hintStyle}

        value={input.value}
        onChange={(event, value) => {console.log(value);input.onChange(value)}}
      >
        {this._renderItems(input)}
      </SelectField>
    );
  }

}

export default NumbersSelector;

Я использую выше компонент следующим образом

<Field
          component={NumbersSelector}
          name={'noOfNights'}
          floatingLabelText="No of Nights"
          hintText="Click to select"
          hintStyle={searchPanelHintStyles}
          inputStyle={searchPanelInputStyles}
          floatingLabelStyle={searchPanelFloatingLabelFixedStyles}
          floatingLabelFixed={true}
          fullWidth={true}
          minValue={1}
          maxValue={10}
          singularText="Night"
          pluralText="Nights"
       />

Это создает список с номерами. Проблема заключается в том, что, когда я выбираю один из пунктов меню, вместо того, чтобы щелкнуть по нему, он выбирает вышеуказанный элемент из этого пункта.

Например, если нажата цифра 7, выбирается цифра 6

Как это исправить, не используя redux-form-material-ui.

DEMO

Answer 1

Аргументы переданы onChange за SelectField являются (event, index, value) так что вы использовали index вместо value,

изменить свой onChange={(event, value) в onChange={(event, index, value)

документы в MaterialUI SelectField