reactjs - Material-UI MenuItems 选择后不显示
问题描述
I'm using material-ui and when selected the menuitems, it didn't show up but it changes the state. 这是我的代码
constructor(){
super();
this.state={
amount: "",
}
// Change amount of picture
onAmountChange = (event) => {
this.setState({ [event.target.name]: [event.target.value]})
}
render(){
const { classes } = this.props;
const { amount } = this.state;
return(
<div>
<div>
<FormControl>
<InputLabel htmlFor="amount-pic">Amount</InputLabel>
<Select
value={amount}
onChange={this.onAmountChange}
name= 'amount'
>
<MenuItem value={5}>5</MenuItem>
<MenuItem value={10}>10</MenuItem>
<MenuItem value={15}>15</MenuItem>
<MenuItem value={30}>30</MenuItem>
<MenuItem value={50}>50</MenuItem>
</Select>
</FormControl>
</div>
<br/>
</div>
);
}
没有显示错误,它可以改变状态量,当我选择时数字没有显示。
解决方案
错误是你的函数onAmountChange
:值是event.target.value
,不是[event.target.value]
。因为[event.target.value]
是数组
onAmountChange = (event) => {
this.setState({ [event.target.name]: event.target.value})
}
推荐阅读
- javascript - 如何在 OpenLayers 5 中仅发送修改后的几何图形?
- android - 锁定和解锁设备后的 InflateException
- python - 如何从数据框 B 中的列 (mother_age) 中减去数据框 A 中的列 (child_age)?
- c++ - 无法写入数据文件,尽管没有错误
- apache-kafka - apache kafka消费者的退避策略
- python - 如何在 pandas 数据框中对一列字符串进行排序,在其中强制按列排序的字母顺序?
- php - 如何在 CPanel Cron 作业中运行 PHPscript?
- c# - 如何在 C# 中动态地将类数组转换为 XML 文件?
- json - 在编译时不知道密钥的情况下解码 JSON 值
- vue.js - vue.js 的 ESLint 警告和错误 - vue/require-default-prop & vue/require-prop-type-constructor