jquery - ReactJS：jquery 库问题

Question

我正在 reactjs 中创建一个表单，以通过 laravel api 将数据提交到数据库中。在将请求发送到 api 以保存数据之前，我需要验证表单字段。

我已经安装了 jquery 库（v3.3.1）并将其导入到我的组件import $ from 'jquery';中，但是当我在中添加任何 jquery 代码/功能时componentDidMount()，在执行渲染方法后调用，它不起作用。

这是我的代码：

componentDidMount()
{
    $(".js-status").on("click", function () {
        alert("Button clicked");
    });
}

render() 
{
    return (
        <button className="js-status" onClick={
            () => this.setStatus(project.token, 'N')
        }>Inactive</button>
    );
}

但是，如果我在其中编写代码，$(window).on("load", function() {});它就会开始工作。

像这样：

componentDidMount()
{
    $(window).on("load", function() {
        $(".js-status").on("click", function () {
            alert("Button clicked");
        });
    });
}

现在我的问题是，为什么没有“window.load”事件它就不能工作..？

我正在关注这个 youtube 教程https://youtu.be/AMMetkCvztg

标签： jqueryreactjs