React onChange evenhandler在没有括号的情况下附加函数时不工作

42 阅读1分钟

我在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>

你能告诉我发生了什么以及为什么会这样吗?