javascript - Material UI 选择不显示标签

Question

我对 Material UI 的“选择”感到很不舒服——大约花了 10 个小时才让它按照我想要的方式工作。我真的很感激一些帮助。

此问题与上一个问题相关:Select MenuItem doesn't show when JSX saved to state我怀疑如果“为什么”得到解答，我可能会更好地了解正在发生的事情。

我想要完成的是让 Select 执行以下正常操作:

• 拥有所有 UI 功能(在选定位置显示问题，然后 选择一个后，将问题缩小并移开 非空选择)
• 选择某些内容后，标签就会出现(正如人们所期望的那样) 下拉菜单)而不是空白(正如我所经历的那样 - 检查 上一个问题)
• 控制台中没有关于“值”未定义的警告
• 当我在选择某些内容后单击远离选择时，我不 希望问题标签移回答案上方，如下所示:
• 我想要一个“无”选项，将选择返回到“空” 形式(也就是说，问题标签以正常大小显示在 选择)
• 我可以设置默认选择的选项

这些不应该是艰巨的任务，但我一生都无法完成。实在是太尴尬了。

• 然后，在选择某些内容后，我想保存该选择(以及 与其他选择选项)来说明(这样我可以将其保存到 localStorage，因此较大的表单不会在页面刷新时“重置”)

无论哪种方式，我目前已经得到了这个 JSX - 实际上是从 Material ui 演示中剪切并粘贴的，其中包含 MenuItems 的 map :

<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 看起来像这样——再次与 Material 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 函数中)，目的是能够传递“选定”/默认选项...

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.

我错过了什么？

Answer 1

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

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