react选择 onChange 不起作用

IT技术 javascript reactjs
2021-05-10 16:15:51

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

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

3个回答

onChange 需要一个函数。

您正在传递它changeDataType()，它正在运行函数changeDataType函数，并设置onChange它的返回值，即空值。

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

<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()}>
其它你可能感兴趣的问题
上一篇react材料 ui 自动完成元素焦点点击 下一篇如何阻止光标跳到输入的末尾