React选择框的onChange事件无法工作

Question

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

在我的react.js代码中，我在渲染函数中返回一个元素。 但是每当我更改值时，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");
}

这个函数只在选择框加载时被触发一次，之后当我改变值时，它不再被触发。

- budhavarapu ranga

Answer 1

onChange需要一个函数。

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

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

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

- Crob

---

这段代码中是否有任何异步操作？似乎在将 changeDataType 设为事件监听器后再定义它是个不好的主意。或许应该将该方法移动到 Hello 对象中（紧挨着 render 方法），并使用 this.changeDataType。 - pherris

不要使用选项标签的selected属性。相反，应该将选定的值传递到select的属性中，以便更轻松地操作值。https://facebook.github.io/react/docs/forms.html#why-select-value - Phi Nguyen

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/

- Michael Parker

---

小提琴出了问题。消息："<a class='gotoLine' href='#53:16'>53:16</a> Uncaught SyntaxError: Unexpected token '<'" - Joymaker

Answer 3

试试这个

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

- Prateek Arora

---

为什么你应该用另一个函数包装函数？另外，你不需要传递带有更改数据信息的参数。 - JaktensTid

对于按钮，它有效。 - ZebraCoder