Question

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

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

道具类型失败：道具value被标记为 SelectInput，但其值为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});
        }
    }
}

它不会更新给我一个默认答案，还会在控制台中给我带来以下其他错误（除了上述所有问题）：

警告：组件正在更改隐藏类型的不受控制的输入被控制。输入元素不应从不受控制的状态切换进行控制（反之亦然）。决定使用受控还是组件生命周期中不受控制的输入元素。

我想念什么？

Answer 1

只需在构造函数中定义 selectLabel ：

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

Answer 2

我不确定为什么上述解决方案无效。

但是，我使用以下函数重建了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"
    }

对我来说，关键概念之一是了解value元素上的Select字段应指向this.state中的项目。然后，onChange需要将该状态变量的名称（令人困惑的是，我将其命名为“值”）传递给eventHandler函数。

handleSelectChange函数的双箭头函数标头（咖喱函数）仍然让我感到困惑...（我不知道'event'属性是如何到达那里的，因为我用一个参数）...但这暂时有效，我可以尝试在将来的某个日期将其重构为我喜欢的语法（即function(a, b) { *do something* }）。（是的....）

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

Answer 3

添加类radio_label：

<FormControlLabel value="male" label="Male" control={<Radio />}  className="radio_label"/>

添加css属性：

.radio_label{
    color:black
}

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

3 个答案: