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以及顯示正常的選擇列表？

回答

相關問題