Javascript 如何设置a<；的默认值；选择>；反应中的元素？

我有一个普通的

元素，它遍历选项列表：

<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>

---

选择的

属性不起作用的原因可能是未设置
此.state.selectedOption的默认值。为了解决这个问题，您可以在构造函数中设置
selectedOption
的值

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

PS：这个答案假设您使用的是基于类的组件。
所有默认值都可以在构造函数中设置

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

接下来，让我们看看您的
onChange
处理程序，它在这里设置得很好：您正确地将状态设置为selected选项的值。假设这是从
render（）
返回的JSX，那么您唯一缺少的就是设置组件的
值
属性

<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>

this.setState（{selectedOption:event.target.value}）
>
{
this.state.options.map（option=>{option.value}）
}

看看官方文件（来源：）

React在根选择标记上使用值属性，而不是使用此选定属性。这在受控组件中更方便，因为您只需要在一个位置更新它

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

选择您最喜欢的口味：

this.state.selectedOption
的默认值是什么？@MelvinAbraham它只是一个字符串。我知道
selectedOption
的数据类型，但是当组件最初呈现时，这个状态变量的值是什么（比如“default”或“1”等）？最初，它被设置为空字符串。在
componentDidMount
期间，它被设置为
options
列表中的一个值（例如“fooValue”）。该文档提供了一个关于如何处理
选择
元素的详细信息，值得一看。使用该方法，您的初始状态为初始/默认值。@3limin4t0r它可以单独完成，但在这种情况下，它可以正常工作。由于在选项更新后，组件将重新渲染，因此
选定的
属性将自动更新。
class ComponentName extends React.Component {
    constructor() {
        super(props);
        this.state = { selectedOption: "My Default Select 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>

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