选择芯片输入不显示所选值

Question

我有一个 Select 并且输入采用芯片格式。我尝试了所选值的控制台日志，并且一切正常。但由于某种原因，它不会显示在选择框上。我在这里做错了什么？

 handleChange = event => {
    this.setState({ badge : event.target.value });
  };

 const chipOptions = [
      {key: 1, 'text': 'text1',  'value': 'text1'},
      {key: 2, 'text':'text2', 'value':'text2'},
      {key: 3, 'text':'text3', 'value':'text3'}
    ]

<FormControl className={classes.formControl}>
            <Select
              value={this.state.badge}
              onChange={this.handleChange}
              inputProps={{
                name: 'badge',
                id: 'badge-simple',
              }}
            >
            {chipOptions && chipOptions.map(option=> (
              <Chip key={option.value} label={option.value} className={classes.chip} value={option.value} />
            ))}

          </Select>
        </FormControl>

Answer 1

Select 呈现所选值的默认方式是呈现其子项。在 Select source code 中，当它循环遍历 Select 的子项时，它执行以下操作：

        selected = areEqualValues(value, child.props.value);
        if (selected && computeDisplay) {
          displaySingle = child.props.children;
        }

这是基于Select 具有MenuItem 子代的假设。例如，在以下示例中，第一个 MenuItem 将被选中，并且该 MenuItem 的子项将是文本“Item 1”：

<Select value={1}>
   <MenuItem value={1}>Item 1</MenuItem>
   <MenuItem value={2}>Item 2</MenuItem>
</Select>

您的 Chips 没有子代，因此不会显示任何内容。您可以通过在Select 上指定renderValue 属性来自定义此行为。这是一个接收值并可以决定渲染什么的函数。

以下示例展示了使用renderValue 属性来渲染Chip：

import React, { useState } from "react";
import ReactDOM from "react-dom";

import FormControl from "@material-ui/core/FormControl";
import Chip from "@material-ui/core/Chip";
import Select from "@material-ui/core/Select";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  }
});
const chipOptions = [
  { key: 1, text: "text1", value: "text1" },
  { key: 2, text: "text2", value: "text2" },
  { key: 3, text: "text3", value: "text3" }
];

function App({ classes }) {
  const [value, setValue] = useState("text1");
  const renderChip = value => {
    return <Chip label={value} className={classes.chip} />;
  };
  return (
    <>
      <FormControl className={classes.formControl}>
        <Select
          inputProps={{
            name: "badge",
            id: "badge-simple"
          }}
          renderValue={renderChip}
          value={value}
          onChange={event => {
            console.log(event.target.value);
            setValue(event.target.value);
          }}
        >
          {chipOptions &&
            chipOptions.map(option => (
              <Chip
                key={option.value}
                label={option.value}
                className={classes.chip}
                value={option.value}
              />
            ))}
        </Select>
      </FormControl>
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);