javascript - 如何为材质 ui 选择字段设置值?
问题描述
我正在为年份字段使用材质 UI 选择。我想根据该州的值设置默认年份。我正在根据年份数组填充年份。
以下是用于创建年份数组的方法,我在组件中调用此方法确实挂载:-
updateYear = () => {
var start = 1950;
var end = new Date().getFullYear() - 20;
var yearValue = [];
for (var year = start; year <= end; year++) {
yearValue.push({ key: year, text: year, value: year });
}
console.log("yearValue", yearValue);
this.setState({ yearValue: yearValue });
};
这是我的材料 UI 选择的代码:-
<Select
value={this.state.year}
onChange={this.handleChange_year}
inputProps={{
name: "year",
id: "year"
}}
>
{this.state.yearValue &&
this.state.yearValue.map(year => {
return <MenuItem value={year.value}>{year.value}</MenuItem>;
})}
</Select>
任何帮助或建议表示赞赏。谢谢你。
解决方案
也许你可以试试这个:
要设置默认值,在组件确实 mount 您可以添加:
this.setState({ year: yearValue[0].value })
然后,编辑 handleChange_year 方法:
handleChange_year = (event) => {
this.setState({ year: event.target.value })
}
推荐阅读
- javascript - ReactJs - 在 onClick 期间每次都添加唯一的组件
- java - Tomcat,参考静态变量帮助生成wsdl
- javascript - node-http-proxy 如何将响应与请求匹配
- google-apps-script - 使用 Apps 脚本为 GDocs 中的行或表格单元格添加边框
- mysql - Hibernate 和 EclipseLink 兼容的 TableGenerator 配置
- elasticsearch - 为什么在 elasticsearch 的全文搜索中,更精确的匹配比不太精确的匹配得分低?
- python - 从包含特定字符串的数据框中删除行
- solr - 在 solr 中仅索引来自 HTML 的纯文本
- php - 如何在yii2中添加最小计算
- android - 当应用程序在android后台时如何从推送通知中接收自定义数据