javascript - 如何以编程方式设置 React Dropdown 的值

Question

我有这个代码

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

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

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

我正在使用的库是https://www.npmjs.com/package/react-dropdown

谢谢

Answer 1

根据documentation ，Dropdown 组件采用 value 属性。

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;