问题描述
<TextField
// autoFocus
margin="dense"
// id="name"
select
label="Majorhead ID"
type="text"
fullWidth
onChange={(event) => {
this.setState({majorhead: event.target.value});
}}
value={this.state.majorhead}
InputLabelProps={{
classes: {
root: this.props.classes.textfieldLabel,},}}
>
{majorhead.all_majorhead.map((row1) => (
<MenuItem value={{id:row1._id,name:row1.name}} key={row1.majorhead_id}>
{row1.name}
</MenuItem>
))}
</TextField>
看看这段代码,图片帮助我实现它。screenshot
screenshot2 即使在选择了所需的值后,我也看不到所选择的选项。我哪里错了?
解决方法
像 MenuItems
一样设置 value={row1._id}
的值吗?
const handleChange = id => {
// Here you can get the complete object of the id.
const targetObject = majorhead.all_majorhead.filter(item => item._id === id)
this.setState({majorhead_id: id});
}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={this.state.majorhead_id}
onChange={(event) => handleChange(event.target.value)}
>
{majorhead.all_majorhead.map((row1) => (
// Value should not be object
<MenuItem value={row1._id} key={row1.majorhead_id}>
{row1.name}
</MenuItem>
))}
</Select>