React select onChange不起作用

React select onChange is not working

本文关键字：不起作用 onChange select React      更新时间：2023-09-26

JsFiddle: https://jsfiddle.net/69z2wepo/9956/

我在我的react.js代码的渲染函数中返回一个选择元素。

但是每当我改变select值时，onChange中的功能不会被触发。

var Hello = React.createClass({
render: function() {
    return <select id="data-type" onChange={changeDataType()}>
           <option selected="selected" value="user" data-type="enum">User</option>
           <option value="HQ center" data-type="text">HQ Center</option>
           <option value="business unit" data-type="boolean">Business Unit</option>
           <option value="note" data-type="date">Try on </option>
           <option value="con" data-type="number">Con</option>
      </select>
    }
});

React.render(<Hello/>, document.getElementById('container'));
 function changeDataType() {
    console.log("entered");
}

这个函数只在select加载时触发一次，随后当我改变值时，它不会被触发。

onChange取函数。

您正在传递changeDataType()，它正在运行changeDataType函数，并将onChange设置为它的返回值，该值为null。

尝试传递实际的函数，而不是对函数求值。

<select id="data-type" onChange={changeDataType}>

当组件发生变化时触发的函数应该在组件内部定义。

我建议在Hello组件中定义函数，并将this.changeDataType传递给onChange属性，如下所示:

var Hello = React.createClass({
changeDataType: function() {
    console.log('entered');
},
render: function() {
    return <select id="data-type" onChange={this.changeDataType}>
           <option selected="selected" value="user" data-type="enum">User</option>
           <option value="HQ center" data-type="text">HQ Center</option>
           <option value="business unit" data-type="boolean">Business Unit</option>
           <option value="note" data-type="date">Try on </option>
           <option value="con" data-type="number">Con</option>
      </select>
    }
});

下面是一个更新后的JSFiddle，它会产生您期望的行为:https://jsfiddle.net/69z2wepo/9958/

试试这个

<select id="data-type" onChange={()=>changeDataType()}>
相关文章：