反应下拉

如何解决反应下拉

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