使用芯片输入进行选择，但不显示所选值 [英] Select with chip input not displaying the selected value

问题描述

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

I have a Select and the inputs are in Chip Format. I tried console log of the value selected and it is getting it fine. But for some reason, it does not get displayed on the select box. What am I doing wrong here?

 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>

推荐答案

Select呈现所选值的默认方式是呈现其子级.在

The default manner in which Select renders the selected value is to render its children. In the Select source code as it is looping through the children of the Select, it does the following:

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

这是基于Select具有MenuItem个子级的假设.例如，在下面的示例中，将选择第一个MenuItem，而MenuItem的子级将是文本"Item 1":

This is based on the assumption of the Select having MenuItem children. For instance, in the following example the first MenuItem would be selected and that MenuItem's children would be the text "Item 1":

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

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

Your Chips don't have children, so nothing is displayed. You can customize this behavior by specifying the renderValue property on Select. This is a function that receives the value and can decide what to render.

以下示例显示了使用renderValue道具渲染Chip:

The following example shows using the renderValue prop to render a 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);

这篇关于使用芯片输入进行选择，但不显示所选值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！