材质UI选择不显示标签-Java 学习之路

我在Material UI的“选择”中度过了一段时间 - 大约10个小时试图按照我喜欢的方式工作 . 我真的很感激一些帮助 .

这个问题与前一个问题有关：Select MenuItem doesn't show when JSX saved to state我怀疑如果"why"得到回答，我可能会更好地了解发生了什么 .

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

具有所有UI好处（在选择点中显示问题，然后在选择非空选择后将问题移动得更小并且不碍事）
一旦选择了某些东西，标签就会出现（正如人们预期的那样下降）而不是空白（正如我一直在经历的那样 - 检查上一个问题）
控制台中没有关于'value'未定义的警告
当我在选择内容后点击选择时，我不希望问题标签在这样的答案之上移回：
我想要一个'none'选项，将选择返回到它的"empty"表格（也就是说，问题标签在选择中以正常大小显示）
我可以设置默认选择的选项

这些不应该是艰巨的任务，但我不能为我的生活得到它 . 这让人很尴尬 .

然后，在选择某些内容时，我想将该选择（以及其他选择选项）保存到状态（因此我可以将其保存到localStorage，以便更大的表单在页面刷新时不会't '重置'）

无论哪种方式，我现在都有这个JSX - 有效地从材料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看起来像这样 - 再次，与材质UI演示完全相同 .

handleSelectChange = event => {
    this.setState({ [event.target.name]: event.target.value });
};

除了控制台之外的这种工作给我以下错误：

失败的道具类型：道具值在SelectInput中标记为必需，但其值未定义 .

单击后，所选选项和问题标签会相互叠加，如下所示：
selected option and question label on top of each other

此外，如果我尝试添加此代码（在componentDidMount函数中），目标是能够传递'selected'/ default选项...

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});
        }
    }
}

它没有更新给我一个默认的答案，并在控制台中给我以下额外的错误（除了上面的所有问题）：

警告：组件正在更改要控制的隐藏类型的非受控输入 . 输入元素不应从不受控制切换到受控制（或反之亦然） . 决定在组件的使用寿命期间使用受控或不受控制的输入元件 .

我错过了什么？

1 回答

我不确定上述解决方案为什么不起作用 .

但是，我使用以下函数重建了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 函数的双箭头函数头（curried函数）仍然让我感到困惑...（我没有't understand how the '事件' property is getting there, given I'm用一个参数调用这个函数）...但是现在这个有效，我可以尝试重构为语法在将来某个日期我很满意（即： function(a, b) { *do something* } ） . （耶....）

希望这证明对某人有帮助......

回复于 2024-04-28T14:04:07+08:00

材质UI选择不显示标签

1 回答

相关问题