javascript - 我想在 React 中显示一个 Snack Bar

Question

这是在单击按钮时调用的函数。

handleClick() {
        var x = document.getElementById("snackbar");
        x.className = "show";
        setTimeout(function () {
            x.className = x
                .className
                .replace("show", "");
        }, 3000);
        return (
            <div id="snackbar">DONE</div>
        )
    }

这是我的 onClick onClick={this.handleClick}

它向我显示了一个错误“未捕获( promise 中)类型错误:无法设置 null 的属性‘className’”我究竟做错了什么。感谢所有的帮助。

Answer 1

TypeError: Cannot set property 'className' of null"

意味着您正在尝试访问空变量中的类名属性。

如果var x = document.getElementById("snackbar");没有结果，它将返回null，并且x将等于null。在 var x = document.getElementById("snackbar"); 之后添加 console.log(x)，以便您可以测试它是否来自此处。

可能是由于:

Invalid HTML syntax (some tag is not closed or similar error)
Duplicate IDs - there are two HTML DOM elements with the same ID
Maybe element you are trying to get by ID is created dynamically (loaded by ajax or created by script)?