如何使用 ReactJS 在选择中设置默认值？
在 HTML 中，选项标签中的 ' selected'属性用于设置选择菜单中的默认值。如果我们不使用React 选择组件，同样的方法也可以用于 React 来设置默认值。但是，如果您使用的是react-select ，那么您需要遵循下面介绍的不同方法。
以下是使用 ReactJS 在 select 中设置默认值的两种方法：
方法一：不使用 React Select 组件
您可以将 boolean-selected 属性与需要设置为默认值的选项一起使用。如果没有选项与此属性集成，则默认选择第一个选项。您可以在本文中阅读有关此方法的更多信息。
句法：
示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。
App.js
import { Component } from 'react'
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
Geeks For Geeks
);
}
}
export default App;App.js
import { Component } from 'react'
import Select from 'react-select';
const options = [
{ value: 'C++', label: 'C++' },
{ value: 'JAVA', label: 'JAVA' },
{ value: 'Javascript', label: 'Javascript' },
{ value: 'Python', label: 'Python' },
{ value: 'Swift', label: 'Swift' }
];
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
Geeks For Geeks
);
}
}
export default App;输出：
在本地服务器上执行代码时的输出
方法二：使用 React Select 组件
您可以使用属性defaultValue在选择菜单中设置默认值 如果没有选项与此属性集成，则默认选择第一个选项。您可以创建一个对象数组，您将在其中存储要显示的所有选项，并且任何单个对象都在defaultValue属性中传递。
句法：
注意：确保您已经使用以下命令安装了react-select模块。
npm install react-select示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。
应用程序.js
import { Component } from 'react'
import Select from 'react-select';
const options = [
{ value: 'C++', label: 'C++' },
{ value: 'JAVA', label: 'JAVA' },
{ value: 'Javascript', label: 'Javascript' },
{ value: 'Python', label: 'Python' },
{ value: 'Swift', label: 'Swift' }
];
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
Geeks For Geeks
);
}
}
export default App;
输出：
在本地服务器上执行代码时的输出