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

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

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

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

Answer 2

根据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;

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

2 个答案: