[英]Select with chip input not displaying the selected value
我有一个选择,输入是芯片格式。 我尝试了所选值的控制台日志,结果很好。 但由于某种原因,它不会显示在选择框中。 我在这里做错了什么?
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
呈现选定值的默认方式是呈现其子项。 在Select 源代码中,当它循环通过 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.