無法獲得輸入選擇表單的初始值

Question

我在我的輸入字段中使用react-select 。 一切正常，除了單擊后將選定的值放入輸入中。 另外（如標題中所述），即使在代碼中設置了初始值，我也無法在選擇字段中看到其初始值。

  render(){
    var Select = require('react-select');
    var options = [
        { value: '1', label: '1' },
        { value: '2', label: '2' }
    ];

    function logChange(val) {
      console.log(val);
    }
    return(

        <Select
          name="form-field-name"
          value="one"
          options={options}
          onChange={logChange}
        />

   );

所有事件都可以正常工作（我可以在console.log上看到它，但是屏幕上沒有任何變化）。

這是console.log和呈現 （空是因為X圖標清晰）

Answer 1

閱讀源代碼后，我很確定您將錯誤的值傳遞給value屬性。

expandValue試圖在options prop查找傳遞的值（從value prop ），如果失敗，則返回undefined 。

for (var i = 0; i < options.length; i++) {
    if (options[i][valueKey] === value) return options[i];
}

您正在傳遞字符串“一個”，該字符串在選項數組中不存在。

在您的情況下， options[i][valueKey]將為字符串“ 1”或“ 2”。 valueKey === 'value' ，因此這是從您的選項的對象value屬性中檢索的（您在label內部具有相同的值，因此我想在此強調一下，因為這可能會造成混淆）。

更改值應該可以解決問題

<Select
   name="form-field-name"
   value="1"
   options={options}
   onChange={logChange} />

回答您的評論問題：我不確定，但這對我來說就像是受控輸入。 您選擇的值位於使用值 prop中的值的隱藏輸入中。 我認為您必須執行以下操作：

class MySelect extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            value: "1"
        }

        this.handleChange.bind(this)
    }

    handleChange(selectedValue) {
        this.setState({ value: selectedValue })
    }

    render() {
        return (
            <Select
                name="form-field-name"
                value={this.state.value}
                options={options}
                onChange={this.handleChange} />
        )
    }
}