我已将“选择”的值设置为本地状态变量。子组件更新状态更改。但下拉菜单将无法更改所选值。 请有人检查下面的代码并纠正我。 谢谢
父组件
class EditVehicle extends Component {
constructor(props) {
super(props);
this.state = {
values: {
vehicleOwner: '',
},
}
}
setVehicleOwner = (owner) => {
console.log(owner);
this.setState({ vehicleOwner: owner._id });
};
render() {
const { values } = this.state;
return (
......
<FormControl className={classes.formControl} >
<Select
value={this.state.values.vehicleOwner}
onChange={this.handleChange}
inputProps={{
name: 'vehicleOwner',
id: 'vehicleOwner',
}}>
{this.props.vehicleOwnersList && this.props.vehicleOwnersList.map((owner, index) => (
<MenuItem value={owner._id} key={index}>{owner.firstName} {owner.lastName}</MenuItem>
))}
</Select>
<Tooltip title="New Vehicle Owner">
<IconButton className={classes.button} aria-label="New Vehicle Owner" color="primary" onClick={this.handleOpenOwnerCreateModal}>
<AddIcon />
</IconButton>
</Tooltip>
</FormControl>
......
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={this.state.openOwnerCreateModal}
className={classes.modal}
onClose={this.handleCloseOwnerCreateModal}>
<NewVehicleOwnerModal
set={this.setVehicleOwner}
selected={null}
action={this.handleCloseOwnerCreateModal} />
</Modal>
);
}
}