javascript-材质用户界面选择不显示标签

我在Material UI的“选择”上花了很长时间-尝试用我想要的方式工作大约10个小时.我真的很感谢您的帮助.

这个问题与上一个问题有关：Select MenuItem doesn’t show when JSX saved to state,我怀疑如果回答“为什么”,我可能会对发生的事情有更好的了解.

我要完成的工作是执行以下正常操作的Select：

>拥有所有UI好东西(在选择的位置显示问题,然后
选择一个后,将问题缩小并移开
非空选择)
>选择某项后,标签就会显示出来(就像人们期望的那样
下拉菜单)而不是空白(按照我的经验-检查
前一个问题)
>控制台中未警告未定义“值”
>当我在选择某物后单击选择时,我不会
希望问题标签像这样返回到答案的顶部：

>我想要一个“无”选项,将选择返回到“空”
表格(也就是说,问题标签以正常大小显示在
选择)
>我可以设置一个默认选择的选项

这些不应该是艰巨的任务,但是我无法终生接受.很尴尬.

>然后,选择某项后,我要保存该选择(以及
以及其他选择选项)(以便将其保存到
localStorage,因此较大的表格在刷新页面时不会“重置”)

无论哪种方式,我目前都拥有此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 });
};

除控制台外,这种工作方式给我以下错误：

Failed prop type: The prop value is marked as required in
SelectInput, but its value is 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});
        }
    }
}

它不会更新给我的默认答案,并且还会给我控制台中的以下其他错误(除了上述所有问题)：

Warning: A component is changing an uncontrolled input of type hidden
to be controlled. Input elements should not switch from uncontrolled
to controlled (or vice versa). Decide between using a controlled or
uncontrolled input element for the lifetime of the component.

我想念什么？

解决方法:

只需将selectLabel定义到构造函数中即可：

constructor () {
    super()
    this.state = {
        selectLabel:'',
    }
}

标签：reactjs,material-ui,javascript
来源： https://codeday.me/bug/20191108/2010175.html