Question

我试图在React.js中的select中获取一个选项的值但不知何故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

试试这个

<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); 
  }

Answer 2

您需要使用e.target.value

请参阅此问题：OnChange event using React JS for drop down

Answer 3

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

Answer 4

event对象没有value属性要访问元素的value属性，当event.target.value是触发此事件的元素时，您需要使用target。

运行示例：

＆＃13;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['john', 'jane', 'greg']
    };
  }

  onSelect = e => {
    console.log(e.target.value);
  }

  render() {
    const{items} = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
        {
          items.map(item => {
            return (<option value={item}>{item}</option>)
          })
        }
        </select>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 5

根据您的要求，这是我的解决方案：

<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(e){
    // e.target.id identified the unique element in DOM 
    // in example when 'exampleSelect' make a change (onChange) event
    if(e.target.id === 'exampleSelect'){  
            console.log("Value for exampleSelect: " + e.target.value);   
    }
    // if you have another html input select add here another 'if'
    // with a diferent id. ex.
    if(e.target.id === 'fruitSelect'){  
            console.log("Value for fruit: " + e.target.value);   
    }
    ...
}

¡Ey！，不要忘记在React构造函数中绑定函数：

this.filterProducts = this.filterProducts.bind(this);

在ReactJs中选择onChange事件

5 个答案: