如何以编程方式设置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

根据文档，该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;

Answer 2

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

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

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