在ReactJs中选择onChange事件

Question

我正在尝试获取select in React中某个选项的值。但是不知为什么，e.value总是未定义的。

这是代码：

<Col md={4} className="col-padding-left">
                            <Input onChange={this.filterProducts} type="select" name="select" id="exampleSelect">
                                <option name='default'>Default</option>
                                <option name='price' value='desc'>Price (High-Low)</option>
                                <option name='price' value='asc'>Price (Low-High)</option>
                                <option name='addedAt' value='desc'>Added At (First-Last)</option>
                                <option name='addedAt' value='asc' >Added At (Last-First)</option>
                                <option name='name' value='desc'>Name (A-Z)</option>
                                <option name='name' value='asc'>Name (Z-A)</option>
                            </Input>
                        </Col>

使用以下函数filterProducts：

filterProducts(e){
            console.log(e.value); 
      }

Answer 1

首先，检查您是否有e。如果是，请尝试e.target。值。

Answer 2

你需要使用e.target.value

请参阅此问题：OnChange事件使用React JS进行下拉

Answer 3

试试这个

<Col md={4} className="col-padding-left">
                        <Input onChange={this.filterProducts.bind(this)} type="select" name="select" id="exampleSelect">
                            <option name='default'>Default</option>
                            <option name='price' value='desc'>Price (High-Low)</option>
                            <option name='price' value='asc'>Price (Low-High)</option>
                            <option name='addedAt' value='desc'>Added At (First-Last)</option>
                            <option name='addedAt' value='asc' >Added At (Last-First)</option>
                            <option name='name' value='desc'>Name (A-Z)</option>
                            <option name='name' value='asc'>Name (Z-A)</option>
                        </Input>
                    </Col>


filterProducts = (e) => {
        console.log(e.target.value); 
  }