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

2019-11-08 19:46:32 阅读：240 来源： 互联网

我在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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