如何設置 a 的默認值<select>React 中的元素？

Question

我有一個普通的<select>元素，它遍歷選項列表：

<select onChange={(event) => this.setState({selectedOption: event.target.value }) }>
{
    this.state.options.map(option => <option key={option.label} value={option.value}>{option.value}</option>)
}
</select>

由於我正在獲取選項列表並且正在通過 AJAX 獲取所選項目，因此我正在這樣做 - 但它也不起作用：

<option key={option.label} selected={option.value === this.state.selectedOption} value={option.value}>{option.label}</option>

如何設置默認選項（不使用外部庫，創建自定義組件）？

編輯： options只是一個對象列表：

[
    {label: 'foo', value: 'fooValue'},
    {label: 'bar', value: 'barValue'},
]

Answer 1

所有默認值都可以在構造函數中設置...

class ComponentName extends React.Component {
    constructor() {
        super(props);
        this.state = { selectedOption: "My Default Select Value" }
    }
}

之后，讓我們看看您的onChange處理程序，這里設置得很好：您正確地將狀態設置為所選選項的值。 假設這是從render()返回的 JSX，那么您唯一缺少的就是設置組件的value屬性...

<select
    value={this.state.selectedOption}
    onChange={(event) => this.setState({selectedOption: event.target.value }) }
>
{
    this.state.options.map(option => <option key={option.label} value={option.value}>{option.value}</option>)
}
</select>

看看官方文檔（來源： ReactJS.org：Forms ）...

React 沒有使用這個 selected 屬性，而是使用根 select 標簽上的 value 屬性。 這在受控組件中更方便，因為您只需要在一個地方更新它。

 Pick your favorite flavor: <select value={this.state.value} onChange={this.handleChange}>

Answer 2

selected屬性不起作用的原因可能是因為未設置this.state.selectedOption的默認值。 為了解決這個問題，您可以在構造函數中設置selectedOption的值。

class ComponentName extends React.Component {
    constructor() {
        ...
        this.state = { selectedOption: "<default_option>" }
        ...
    }
}

如果您不知道應該事先設置的默認值，那么您可以稍后使用setState()來更改selectedOption的值。

示例： https : //codesandbox.io/s/funny-feynman-1b6g1?file=/src/App.js

function myAjaxFunction(...) {
    let default_value = ...

    this.setState({
        selectedOption: default_value
    });

    ...
}

PS：這個答案假設您使用的是基於類的組件。