reactjs - Material-ui 选择框不显示选择

Question

我有一个 Material 用户界面选择框，其中填充了状态变量。无论我尝试了什么，当我选择一个选项时，我都无法获得实际显示的值。谁能告诉我为什么？它总是给我一个空白栏。我什至从另一个代码沙箱中获取了一个示例，并几乎完全复制了它。我注意到的一件事是我的 event.target.value 总是未定义，我不确定为什么。所以我只是在我的handleChange函数中使用值。任何帮助是极大的赞赏!这让我发疯。

代码沙箱:https://codesandbox.io/s/jnyq16279v

代码:

import React from 'react';
import MenuItem from 'material-ui/MenuItem';
import Select from 'material-ui/SelectField';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

export default class KKSelect extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectOptions: [
                {
                    value: "Image",
                    id: "1"
                },
                {
                    value: "Integer",
                    id: "2"
                },
                {
                    value: "Decimal",
                    id: "3"
                },
                {
                    value: "Boolean",
                    id: "4"
                },
                {
                    value: "Text",
                    id: "5"
                }
            ],
            selectedValue: ""
        };
    }

    renderSelectOptions = () => {
        return this.state.selectOptions.map((dt, i) => {
            return (
                <MenuItem key={i} value={dt.id}>
                    {dt.value}
                </MenuItem>
            );
        });
    }

    handleChange = (event, value) => {
        this.setState({ selectedValue: value });
    };

    render() {
        return (
            <MuiThemeProvider>

                <Select
                    value={this.state.selectedValue}
                    onChange={this.handleChange}
                >
                    {this.renderSelectOptions()}
                </Select>

            </MuiThemeProvider>
        );
    }
}

Answer 1

首先，您使用的是material-ui版本0.20.1 - 该版本的文档位于:https://v0.material-ui.com/#/components/select-field ，但建议使用 v1 ( https://material-ui.com/getting-started/installation/ )。

对于版本 0.20.1，您的代码存在一些问题:

首先:renderSelectOptions:{dt.value}应分配给MenuItem PrimaryText

renderSelectOptions = () => {
        return this.state.selectOptions.map((dt, i) => {
            return (
                <MenuItem key={i} value={dt.id}>
                    {dt.value}
                </MenuItem>
            );
        });
    }

像这样:

renderSelectOptions = () => {
    return this.state.selectOptions.map((dt, i) => (
      <MenuItem key={dt.id} value={dt.id} primaryText={dt.value} />
    ));
  };

第二个 - 句柄更改具有事件、索引和值参数，因此您的值实际上是索引 - 而不是值。

handleChange = (event, value) => {
    this.setState({ selectedValue: value });
};

应该是:

  handleChange = (event, index, value) => {
    this.setState({ selectedValue: value });
  };

在此处查看 Material-ui 版本 0.20.1 的工作版本:https://codesandbox.io/s/9q3v1746jy

附注如果您使用的是material-ui版本1.2.1，我也为该版本制作了工作示例，您可以在这里查看:https://codesandbox.io/s/jjvrnokkv3