Question

我有以下代码，显示正常的选择列表。它在逻辑上工作正常，我能够记录任何变化发生时。但问题是，显示非常小的框而不是足以显示选项的文本框。我的占位符显示为普通文本。但是当我点击占位符时，所有值都会显示出来。

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

您已经在顶部导入选择，为什么要这样做

var Select = require（＆＃39; react-select＆＃39;）;

再次在渲染功能中？

你的onChange处理程序也应该是onChange = {this.onChange}，你可以在构造函数的顶部绑定处理程序，如下所示：

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

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

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

关于CSS问题，来自github：

//确保在某些时候包括样式，可能是在引导期间

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

react-select：我们还需要CSS才能显示正常的选择列表吗？

1 个答案: