材質 UI 選擇不顯示標簽

Question

我在 Material UI 的“選擇”上玩得很開心 - 大約 10 個小時試圖讓一個人以我想要的方式工作。 我真的很感激一些幫助。

這個問題與前一個問題有關： Select MenuItem 不顯示 JSX 保存到狀態的時間，我懷疑如果“為什么”得到了回答，我可能會更好地了解發生了什么。

我想要完成的是讓 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標記為 required ，但其值為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"
}

我的一個關鍵概念是了解Select元素上的value字段應該指向this.state中的一個項目。 然后，onChange 需要將該狀態變量的名稱（令人困惑的是，我將其命名為“value”）傳遞給 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
}