Выберите с входом микросхемы, не отображая выбранное значение

Question

У меня есть выбор, и входы в формате чипа. Я попытался консольный журнал выбранного значения, и он получает это нормально. Но по какой-то причине он не отображается в окне выбора. Что я тут не так делаю?

 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 , когда он перебирает дочерние элементы Select, выполняется следующее:

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

Это основано на предположении, что Select имеет MenuItem детей. Например, в следующем примере будет выбран первый элемент MenuItem, а потомками этого элемента MenuItem будет текст «Элемент 1»:

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

У ваших фишек нет детей, поэтому ничего не отображается. Вы можете настроить это поведение, указав свойство renderValue в Select. Это функция, которая получает значение и может решать, что отображать.

В следующем примере показано использование реквизита 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);