material ui select Field 不能与 Redux 表单一起正常工作

Question

我正在使用 materialUi 和 redux 形式我有以下代码

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"
       />

这将创建一个包含数字的列表。问题是当我 select 菜单项中的一项，而不是单击的一项时，它 select 是单击项中的上述项。

例如，如果点击数字 7，则数字 6 得到 selected

如何在不使用 redux-form-material-ui.[= 的情况下解决此问题 13=]

DEMO

Answer 1

为 SelectField 传递给 onChange 的参数是 (event, index, value) ，因此您使用的是 index 而不是 value.

将您的 onChange={(event, value) 更改为 onChange={(event, index, value)

文档位于 MaterialUI SelectField

material ui select Field 不能与 Redux 表单一起正常工作

materialui selectField does not work properly with Redux forms

reactjs

redux

material-ui

redux-form

react-redux