[英]How do I set the default value of a <select> element in React?
I have a plain old <select>
element that iterates through a list of options:我有一个普通的
<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>
Since I'm fetching the list of options and the selected item is being fetched via AJAX, I'm doing this -- but it doesn't work either:由于我正在获取选项列表并且正在通过 AJAX 获取所选项目,因此我正在这样做 - 但它也不起作用:
<option key={option.label} selected={option.value === this.state.selectedOption} value={option.value}>{option.label}</option>
How do I set the default option (without using an external library, creating custom component)?如何设置默认选项(不使用外部库,创建自定义组件)?
Edit: options
is just a list of objects:编辑:
options
只是一个对象列表:
[
{label: 'foo', value: 'fooValue'},
{label: 'bar', value: 'barValue'},
]
All defaults can be set in the constructor...所有默认值都可以在构造函数中设置...
class ComponentName extends React.Component {
constructor() {
super(props);
this.state = { selectedOption: "My Default Select Value" }
}
}
After that, let's look at your onChange
handler, which is setup well here: you are correctly setting the state to the value of selected option.之后,让我们看看您的
onChange
处理程序,这里设置得很好:您正确地将状态设置为所选选项的值。 Assuming that this is JSX that gets returned from render()
, then the only thing you are missing is to set the value
attribute of the component...假设这是从
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>
Take a look at the official docs (Source: ReactJS.org: Forms )...看看官方文档(来源: ReactJS.org:Forms )...
React, instead of using this selected attribute, uses a value attribute on the root select tag.
React 没有使用这个 selected 属性,而是使用根 select 标签上的 value 属性。 This is more convenient in a controlled component because you only need to update it in one place.
这在受控组件中更方便,因为您只需要在一个地方更新它。
Pick your favorite flavor: <select value={this.state.value} onChange={this.handleChange}>
The reason selected
attribute is not working is probably because the default value of this.state.selectedOption
is not set. selected
属性不起作用的原因可能是因为未设置this.state.selectedOption
的默认值。 In order to fix this, you can set the value of selectedOption
within the constructor.为了解决这个问题,您可以在构造函数中设置
selectedOption
的值。
class ComponentName extends React.Component {
constructor() {
...
this.state = { selectedOption: "<default_option>" }
...
}
}
In case you don't know the default value that should be set beforehand, then, you can use setState()
later to change the value of selectedOption
.如果您不知道应该事先设置的默认值,那么您可以稍后使用
setState()
来更改selectedOption
的值。
Example: https://codesandbox.io/s/funny-feynman-1b6g1?file=/src/App.js示例: https : //codesandbox.io/s/funny-feynman-1b6g1?file=/src/App.js
function myAjaxFunction(...) {
let default_value = ...
this.setState({
selectedOption: default_value
});
...
}
PS: This answer assumes that you are using class-based component. PS:这个答案假设您使用的是基于类的组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.