[英]Material UI select not showing label
我在 Material UI 的“选择”上玩得很开心 - 大约 10 个小时试图让一个人以我想要的方式工作。 我真的很感激一些帮助。
这个问题与前一个问题有关: Select MenuItem 不显示 JSX 保存到状态的时间,我怀疑如果“为什么”得到了回答,我可能会更好地了解发生了什么。
我想要完成的是让 Select 执行以下正常操作:
这些不应该是艰巨的任务,但我这辈子都做不到。 比较尴尬
无论哪种方式,我目前都有这个 JSX - 有效地从材料 ui 演示中剪切和粘贴,带有MenuItems
的地图:
<FormControl className={classes.formControl}>
<InputLabel htmlFor={this.props.label}>{this.props.label}</InputLabel>
<Select
value={this.state.selectLabel}
onChange={this.handleSelectChange}
inputProps={{
name: 'selectLabel',
id: this.props.label,
}}
>
{this.props.value.map(valueLabelPair =>
<MenuItem
key={this.props.XMLvalue + "_" + valueLabelPair.label}
value={valueLabelPair.value}
>
{valueLabelPair.label}
</MenuItem>
)}
</Select>
</FormControl>
handleSelectChange 看起来像这样——同样,与材质 UI 演示完全相同。
handleSelectChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
这种工作除了控制台给我以下错误:
失败的道具类型:道具
value
在SelectInput
标记为 required ,但其值为undefined
。
此外,如果我尝试添加此代码(在 componentDidMount 函数中),目标是能够传入“selected”/默认选项......
componentDidMount() {
for (var i = 0; i < this.props.value.length; i++) {
if(this.props.value[i].selected) {
// *works* console.log("selected found: " + this.props.value[i].label);
this.setState({selectLabel:this.props.value[i].label});
}
}
}
它不会更新给我一个默认答案,并且还会在控制台中给我以下附加错误(除了上述所有问题):
警告:组件正在将隐藏类型的不受控制的输入更改为受控制。 输入元素不应从不受控制切换到受控制(反之亦然)。 决定在组件的生命周期内使用受控或非受控输入元素。
我错过了什么?
只需将selectLabel定义为构造函数:
constructor () {
super()
this.state = {
selectLabel:'',
}
}
我不确定为什么上述解决方案不起作用。
但是,我使用以下功能重建了 Select 以返回“option”元素而不是“MenuItem”元素:
buildSelectOptions(optionsPairs) { // note, this references props and blank option could be split out for reuse
var JSX_return = [];
if (this.props.includeBlank && this.props.includeBlank === true) {
JSX_return.push(<option key="nada" value="" />);
}
for (var optionLabel in optionsPairs) {
JSX_return.push(<option key={optionLabel} value={optionsPairs[optionLabel]}>{optionLabel}</option>);
}
return JSX_return;
}
我的渲染现在看起来像这样:
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-native-simple">{this.props.label}</InputLabel>
<Select
native
value={this.state.value}
onChange={this.handleSelectChange('value')}
inputProps={{
name: this.props.label,
id: this.props.id,
}}
>
{this.buildSelectOptions(this.props.options)}
</Select>
<FormHelperText>{this.props.helperText}</FormHelperText>
</FormControl>
事件处理程序如下所示:
handleSelectChange = name => event => { //FUTURE: combine the handlers (or split out question types to sub-components)
this.setState({ [name]: event.target.value },
() => this.props.stateChangeHandler(this)
);
};
传递给此对象的道具如下所示:
{
"key": "test4",
"id": "test4",
"label": "Question Label 4",
"XMLValue": "XMLQ4",
"type": "DropDown",
"includeBlank": true,
"helperText": "PCodes FTW!",
"options": {
"No oe": "NA",
"My1": "One",
"My2": "Two",
"My3": "three"
},
"value": "One"
}
我的一个关键概念是了解Select
元素上的value
字段应该指向this.state
中的一个项目。 然后,onChange 需要将该状态变量的名称(令人困惑的是,我将其命名为“value”)传递给 eventHandler 函数。
handleSelectChange
函数的双箭头函数头(柯里化函数)仍然让我感到困惑......(我不明白 'event' 属性是如何到达那里的,因为我用一个参数调用了这个函数)......但这现在有效,我可以尝试重构为我熟悉的语法(即: function(a, b) { *do something* }
)在未来的某个日期。 (是的....)
添加类radio_label
:
<FormControlLabel value="male" label="Male" control={<Radio />} className="radio_label"/>
添加 css 属性:
.radio_label{
color:black
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.