ReactJs 中的 onChange 事件选择答案

【问题标题】：onChange event select in ReactJsReactJs 中的 onChange 事件选择
【发布时间】：2018-04-25 10:19:11
【问题描述】：

我试图在 React.js 中的选择中获取选项的值，但不知何故 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); 
      }

【问题讨论】：

你选择使用哪个库？
是e.target.value
OnChange event using React JS for drop down的可能重复

标签： javascript jquery reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

运行示例：

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

<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>

【讨论】：

【解决方案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); 
  }

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

你需要使用e.target.value

看到这个问题：OnChange event using React JS for drop down

【讨论】：