为什么我的 React 复选框在渲染时触发更改处理程序，然后在单击该框时不触发

Why is my React checkbox onChange handler firing on render and then not when the box is clicked?

本文关键字：然后 程序 单击 处理 React 我的 为什么 复选框      更新时间：2023-09-26

通读了 React 文档并将问题归结为一个简单的案例，仍然无法完全理解我做错了什么。

JSFiddle：https://jsfiddle.net/justin_levinson/pyn7fLq5/或写在下面：

var TestForm = React.createClass({
    render : function() {
        return (
            <div>
                <p>Test Form</p>
                <form>
                    <TestBox />
                </form>
            </div>
        )
    }
});
var TestBox = React.createClass({
    render : function() {
        return (<input type="checkbox" name={"testbox"} defaultChecked={true} onChange={this.handleCheck()}/>)
    },
    handleCheck : function(event) {
        console.log("check");
        console.log(event);
    }
});

当页面加载时，我在日志中得到一个"检查"，然后是事件的"未定义"，然后它不会在后续点击时再次触发。 已经尝试过使用onClick和onChange以及创建一个受控的（checked={true}）而不是上面的不受控制的（defaultChecked={true}）。

谢谢！

因为你已经在渲染时调用了该方法。

将onChange={this.handleCheck()}更改为onChange={this.handleCheck}

对于将来阅读本文的任何人（如我），如果需要传入参数，您也可以通过像onClick={(e) => this.handleCheck(parameter)}这样的格式来解决此问题。

相关文章：