Question

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

我在react.js代码中的render函数中返回一个select元素。

但每当我更改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");
}

此功能仅在加载选择时触发一次，随后当我更改值时，它不会被触发。

Answer 1

(new DOMParser()).parseFromString("<div></div>", "text/html");需要一个功能。

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

尝试传递实际函数，而不是评估函数。

onChange

Answer 2

组件发生变化时触发的函数应该真正在组件本身内定义。

我建议您在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/

Answer 3

尝试一下

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

React select onChange不起作用

3 个答案: