我在React中使用onChange时看到了一些奇怪的东西。
基本流程是监听标签div表的变化。
我使用反应类组件,并且已经绑定了函数:
class ProgressTable extends Component {
constructor(props) {
super(props);
this.onTableChangeHandler = this.onTableChangeHandler.bind(this);
}
onTableChangeHandler() {
console.log("hi from onTableChangeHandler");
}
render() {
return (
<div className="table-body-container" onChange={this.onTableChangeHandler}> // not work
{this.props.tableBody}
</div>
);
}
}
像往常一样,代码应该是好的。
但这里发生了一些奇怪的事情。onChange处理程序应该调用onTableChangeHandler函数,但现在却没有。
我试图弄清楚这里发生了什么,发现如果我像这样给onChange处理程序的函数加上小括号,代码就能正常工作并正确地监听变化,除了组件安装时的第一个多余的调用:
<div className="table-body-container" onChange={this.onTableChangeHandler()}> // work like usual
{this.props.tableBody}
</div>
此外,我还尝试了这个方法,它也是有效的:
<div className="table-body-container" onChange={console.log("hi")}> // "hi"
{this.props.tableBody}
</div>
你能告诉我发生了什么以及为什么会这样吗?