react-select：我们是否需要CSS以及显示正常的选择列表？

我有以下代码显示一个正常的选择列表。它在逻辑上运行良好，我可以在发生任何更改时记录日志。但问题是，正在显示一个非常小的框而不是一个足以显示选项的文本框。而且我的占位符正在显示为普通文本。但是当我点击占位符时，所有的值都显示出来。react-select：我们是否需要CSS以及显示正常的选择列表？

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

来源

2017-07-25 Kishore

期间Ÿ将很高兴地看到一个小提琴或沙箱。 – Andrew

@安德鲁---对不起，我不明白你的意思，你能告诉我一点清楚！ – Kishore

这是[沙箱]（https://codesandbox.io/s/new）。如果你在这里展示你的问题，这将会更容易理解。 – Andrew

你已经导入选择顶部，你为什么这样做

VAR选择=需要（ '反应选'）;

再次在渲染功能？

而且你的onChange处理应的onChange = {} this.onChange，你可以在构造上类似这样的处理程序绑定：

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

或者你可以将它传递给这样的选择组件

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

至于CSS的问题，从GitHub：

//一定要包括在某些时候的风格，probabl你的引导

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

来源

2017-07-25 16:58:47

- 我同意你的观点。但是，您能否告诉我为什么我无法显示足够长度的选择列表来显示选项？ – Kishore

我相信这是我上面提到的问题，你必须包含相应的CSS。 –

---我收到了一个错误，当我把这个陈述当作没有找到的时候。我需要我的项目目录的任何文件吗？ – Kishore

react-select：我们是否需要CSS以及显示正常的选择列表？

回答

相关问题