Javascript 如何以编程方式设置React下拉列表的值

我有这个密码

<Dropdown
    id="city"
    placeholder="Select a city"
    options={this.state.cities}
    onChange={this.onChangeHandler}
    />;

；

这将显示一个下拉列表，显示占位符“选择一个城市”

我想做的是，如果this.state.cities只有一个元素，将其设置为预选。否则，继续显示占位符文本和下面的所有选项

我正在使用的图书馆是

---

谢谢

在下拉组件中，您可以执行以下操作

{(this.props.options.length > 1) ? <option>{this.props.placeholder}</option>: null}

{（this.props.options.length>1）{this.props.placeholder}:null}

---

浏览器将自动选择列表中的第一个选项。

在下拉组件中，您可以执行以下操作

{(this.props.options.length > 1) ? <option>{this.props.placeholder}</option>: null}

{（this.props.options.length>1）{this.props.placeholder}:null}

浏览器将自动选择列表中的第一个选项。

根据，

下拉列表

组件采用

值

属性

import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'

class App extends React.Component {
   constructor() {
     super();
      this.state={
        cities: ["New York", "San Francisco", "Seattle", "Washington DC"],
        selectedCity: ""
      }
   }

   handleSelectCity = (option)=> {
      const selectedCity = option.value
      this.setState({selectedCity});
   }

   render() {
      const {selectedCity, cities} = this.state;

      return (
        <Dropdown 
          options={cities} 
          onChange={this.handleSelectCity} 
          value={selectedCity} 
          placeholder="Select an option" 
        />
      )
   }
}

export default App;

从“反应下拉列表”导入下拉列表
导入“反应下拉列表/style.css”
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
这个州={
城市：[“纽约”、“旧金山”、“西雅图”、“华盛顿特区”]，
选定城市：“
}
}
handleSelectCity=（选项）=>{
const selectedCity=option.value
this.setState（{selectedCity}）；
}
render（）{
const{selectedCity，cities}=this.state；
返回(
)
}
}
导出默认应用程序；

根据，

下拉列表

组件采用

值

属性

import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'

class App extends React.Component {
   constructor() {
     super();
      this.state={
        cities: ["New York", "San Francisco", "Seattle", "Washington DC"],
        selectedCity: ""
      }
   }

   handleSelectCity = (option)=> {
      const selectedCity = option.value
      this.setState({selectedCity});
   }

   render() {
      const {selectedCity, cities} = this.state;

      return (
        <Dropdown 
          options={cities} 
          onChange={this.handleSelectCity} 
          value={selectedCity} 
          placeholder="Select an option" 
        />
      )
   }
}

export default App;

从“反应下拉列表”导入下拉列表
导入“反应下拉列表/style.css”
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
这个州={
城市：[“纽约”、“旧金山”、“西雅图”、“华盛顿特区”]，
选定城市：“
}
}
handleSelectCity=（选项）=>{
const selectedCity=option.value
this.setState（{selectedCity}）；
}
render（）{
const{selectedCity，cities}=this.state；
返回(
)
}
}
导出默认应用程序；

您也可以共享

这个.onChangeHandler

方法吗？提供值prop-有条件地启动当您选择一个选项时，onChangeHandler方法会做一些事情。我需要在用户单击控件之前预选该选项。实际上，这是一个很好的观点，因为我认为如果预先选择，我不需要一个按钮来提交该值。@user3174311当前的下拉值也在状态中存储在哪里？因为我在你的例子中看不到任何下拉列表的值。您还可以根据城市长度在组件状态中初始化所选值，如：this.state={cities:cities；//来自某处，selectedCity:cities.length==1？cities[0]：null}但这仅适用于组件初始化，因此如果您从后端获取城市，您可以执行以下操作：您无法指定正在使用的库。是否也可以共享

此.onChangeHandler

方法？提供值prop-有条件地启动onChangeHandler方法在您选择选项时执行某些操作。我需要在用户单击控件之前预选该选项。实际上，这是一个很好的观点，因为我认为如果预先选择，我不需要一个按钮来提交该值。@user3174311当前的下拉值也在状态中存储在哪里？因为我在你的例子中看不到任何下拉列表的值。您还可以根据城市长度在组件状态中初始化所选值，如：this.state={cities:cities；//来自某处，selectedCity:cities.length==1？cities[0]：null}但这仅适用于组件初始化，因此如果您从后端获取城市，您可以这样做：您没有指定您正在使用的库假设城市：[“纽约”]，仅限？您只有一个选项可以选择纽约，但我的问题是如何将其预选。要预选“纽约”，只需将

selectedCity

设置为“纽约”在

this.state

对象中

this.state={cities:[“纽约”、“旧金山”、“西雅图”、“华盛顿特区”]，selectedCity:“纽约”}

您可以使用我的代码玩一玩很乐意帮助：）如果城市：[“纽约”]，仅？您只有一个选项可以选择哪个是

newyork

很棒，但我的问题是如何预选。要预选“newyork”，只需在

this.state

对象中将

selectedCity

设置为“newyork”

this.state={cities:[“纽约”、“旧金山”、“西雅图”、“华盛顿特区]，selectedCity:“纽约”}

您可以使用我的代码玩一玩很乐意帮助：）