react-select：我们是否还需要 CSS 来显示正常的 select 列表？

Question

我有以下显示正常 select 列表的代码。它在逻辑上工作正常，我可以在发生任何更改时进行记录。但问题是，显示的是非常小的框，而不是足以显示 options.And 我的占位符显示为普通文本的文本框。但是当我点击占位符时，所有的值都会被显示出来。

import Select from 'react-select;

class SelectList extends Component {

     onChange() {
       console.log("Value Changed");
     }  

     render() {
         var Select = require('react-select');
         var options = [
                 { value: 'one', label: 'India' },
                 { value: 'two', label: 'Singapore' },
                 { value: 'three', label: 'IceLand' }
          ];

       return(
          <Select
             name="Select List"
             value="one"
             options={options}
             onChange={this.onChange.this(bind}}
          />
       );
}

这里需要 CSS 东西吗？谁能告诉我我在这里遗漏了什么？

[1]: https://i.stack.imgur.com/NA4hT.png

Answer 1

你已经在顶部导入 Select，你为什么要这样做

var Select = require('react-select');

再次在渲染函数中？

您的 onChange 处理程序也应该是 onChange={this.onChange} 并且您可以像这样在构造函数的顶部绑定处理程序：

this.onChange = this.onChange.bind(this);

或者您可以像这样将它传递给 Select 组件

onChange={() => {this.onChange()}}

至于CSS问题，来自github：

// Be sure to include styles at some point, probably during your bootstrapping

import 'react-select/dist/react-select.css';

react-select：我们是否还需要 CSS 来显示正常的 select 列表？

react-select: Do we need CSS as well just to display a normal select list?

reactjs

react-select