Javascript Reactjs<；选择>；不触发onChange

我正在使用

标记构建一个简单的无状态组件

并非每次选择选项时都会调用

onChange

事件。偶尔会调用它（在随机选择项目数之后）

类TestList扩展组件{
handleSelectListChange=事件=>{
日志（“单击”+事件.目标.值）；
};
getList=（）=>{
让期权=[]；
for（设i=0；i<10；i++）{
选项。推送（{“ITEM”+i}）；
}
返回(
{options}
);
};
渲染=（）=>{
让list=this.getList（）；
返回(
{list}
);
};
}
导出默认测试列表；

---

为什么我的onChange没有在每次单击时都被激发？

从

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

到

它工作正常

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;

从“react”导入{Component}；
从“React”导入React；
类TestList扩展组件{
handleSelectListChange=事件=>{
日志（“单击”+事件.目标.值）；
};
getList=（）=>{
让期权=[]；
for（设i=0；i<10；i++）{
选项。推送（{“ITEM”+i}）；
}
返回(
{options}
);
};
渲染=（）=>{
让list=this.getList（）；
返回(
{list}
);
};
}
导出默认测试列表；

---

希望它能帮助您@Snehal，问题与状态变化无关（我知道这一点）。问题是onChange事件没有被调用……我自己试过代码，它的工作原理是什么？每次我选择任何选项时都会调用该事件？在我测试它时工作正常，可能您遇到了另一个错误。是否检查控制台？是否尝试将handleSelectListChange绑定到此控制台？在构造函数中：this.handleSelectListChange=this.handleSelectListChange.bind（this）；没必要那样做。

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

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;