Reactjs 在芯片输入不显示所选值的情况下选择

我有一个选择，输入是芯片格式的。我尝试了所选值的控制台日志，结果很好。但由于某些原因，它不会显示在选择框上。我做错了什么

 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>

handleChange=event=>{
this.setState（{badge:event.target.value}）；
};
常量选项=[
{键：1，'text'：'text1'，值：'text1'}，
{key:2，'text'：'text2'，value'：'text2'}，
{键：3，'text'：'text3'，'value'：'text3'}
]
{chipOptions&&chipOptions.map（选项=>(
))}

默认情况下，

Select

呈现选定值的方式是呈现其子项。在中，当它在Select的子对象中循环时，它执行以下操作：

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

这是基于假设

Select

具有

MenuItem

子项。例如，在以下示例中，将选择第一个MenuItem，并且该MenuItem的子项将是文本“Item 1”：

---

太好了@Ryan，但在我的情况下，我需要在有效负载中发布值，并使用multiselect在前端显示项目。@Lee我建议您创建一个单独的问题，以便更全面地解释您的问题。下面是

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

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);