Question

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

Code Sandbox：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/）。< / p>

对于版本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

P.S。如果您使用的是material-ui版本1.2.1，我也为该版本制作了示例，您可以在此处查看：https://codesandbox.io/s/jjvrnokkv3

Answer 2

可以通过在 listbox props 中使用自定义样式来解决。请参考我的代码。

 <Autocomplete
            key={`${filterKey}-township`}
            onChange={onAutocompleteChange}
            disableClearable
            multiple
            fullWidth
            limitTags={1}
            value={value}
            disableCloseOnSelect={true}
            size="small"
            id="township"
            options={townships}
            getOptionLabel={(option) => option.Township}
            ListboxProps={{
               style: {
                  position: "absolute",
                  top: 10,
                  bottom: 0,
                  right: 0,
                  left: 0,
                  height:300,
                  width: "100%",
                  overflowY: "auto",
                  backgroundColor: "white",
               },
            }}
            renderInput={(params) => (
               <TextField
                  {...params}
                  variant="standard"
                  label="Township"
                  onKeyDown={handleKeyDown}
               />
            )}
            renderOption={(option, { selected }) => (
               <React.Fragment>
                  <Checkbox size="small" icon={icon} checkedIcon={checkedIcon} checked={selected} />
                  <Typography variant="body2">{option.Township}</Typography>
               </React.Fragment>
            )}
         />

material-ui选择Box不显示选择

2 个答案: