材料 ui 选择字段不适用于 Redux 表单答案

【问题标题】：materialui selectField does not work properly with Redux forms材料 ui 选择字段不适用于 Redux 表单
【发布时间】：2016-12-16 07:11:54
【问题描述】：

我正在使用带有 redux 形式的 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

【问题讨论】：

你可以在这里复制它吗？我设置了它，但选择根本不起作用。 webpackbin.com/VkFLH_3Xf保存后发布链接。
嘿@Anarion 我找不到那里的错误。谢谢你的努力真的很感激
可以从头开始。能够使用工作代码将有助于解决问题。如果您尝试使用 material-ui 的常规 Select 控件，一切正常吗？
@Anarion 你错过了 react-tap-event-plugin :) 请访问webpackbin.com/EJZEl3nQM
当包含这个插件时，站点停止工作：D 我无法在文件选项卡之间切换。他们必须使用相同的东西，这会破坏他们的网站

标签： reactjs redux react-redux material-ui redux-form

【解决方案1】：

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

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

文档MaterialUI SelectField

【讨论】：