Reactjs <select> 没有触发 onChange答案

【问题标题】：Reactjs <select> not triggering onChangeReactjs <select> 没有触发 onChange
【发布时间】：2018-12-05 01:54:14
【问题描述】：

我正在使用<select> 标签构建一个简单的无状态组件。

每次选择选项时都不会调用onChange 事件。偶尔会调用它（在选择随机数量的项目之后）。

class TestList extends Component {

    handleSelectListChange = event => {
        console.log("CLICKED " + event.target.value);
    };

    getList = () => {
        let options = [];
        for (let i = 0; i < 10; i++) {
            options.push(<option key={i} value={i}>{"ITEM " + i}</option>);
        }

        return (
            <select size={20} onChange={this.handleSelectListChange}>
                {options}
            </select>
        );
    };

    render = () => {
        let list = this.getList();

        return (
            <div>{list}</div>
        );
    };
}

export default TestList;

为什么我的 onChange 没有在每次点击项目时被触发？

【问题讨论】：

希望对你有帮助stackoverflow.com/questions/28868071/…
@Snehal，问题与状态变化无关（我知道这一点）。问题是 onChange 事件没有被调用...
我自己尝试了代码及其工作原理？每次我选择任何选项时都会调用该事件？
当我测试它时工作正常，也许你得到另一个错误。你检查控制台了吗？
您是否尝试将 handleSelectListChange 绑定到此？在构造函数中：this.handleSelectListChange = this.handleSelectListChange.bind(this);

标签： javascript html reactjs select

【解决方案1】：

修改代码

 <select size={20} onChange={this.handleSelectListChange}>

到

<select size={20} onChange={this.handleSelectListChange.bind(this)}>

【讨论】：

不需要这样做。

【解决方案2】：

它工作正常。

import { Component } from "react";

import React from "react";

class TestList extends Component {

handleSelectListChange = event => {
    console.log("CLICKED " + event.target.value);
};

getList = () => {
    let options = [];
    for (let i = 0; i < 10; i++) {
        options.push(<option key={i} value={i}>{"ITEM " + i}</option>);
    }

    return (
        <select size={20} onChange={this.handleSelectListChange}>
            {options}
        </select>
    );
};

render = () => {
    let list = this.getList();

    return (
        <div>{list}</div>
    );
};
}
export default TestList;

【讨论】：