React JS 'this' 没有按预期工作

IT技术 javascript reactjs
2022-07-31 01:27:18

我有以下代码

save: function() {
        var _this = this;

        console.log(this.refs.itemText)

        this.setState({isEditing : false}, 
            function() {
                console.log("Inside call back");
                console.log(_this.refs);
                console.log(_this.refs.itemText);
             }   
        );    
    },

但是 _this 在回调函数中是不可访问的。这是范围问题吗?

在此处查看演示

2个回答

我检查了你的代码,一切正常。问题出在你的逻辑上。

让我向你解释一下出了什么问题。

  1. 当您处于编辑模式时,您的 itemText 会被渲染,因此它在 refs 中可用,因此它显示正确的控制台日志。

  2. 当您保存并更改状态时,它会重新呈现表单,并且由于您的状态已更改,因此您的输入元素现在已隐藏。因此,当您尝试访问其引用时,它会返回 undefined。

我希望这能回答你的问题。

使用 refs 的正确位置是在特定的React 生命周期方法中,例如 ComponentDidMount、ComponentDidUpdate。

在您的情况下,如果您想在状态更改后立即执行某些操作,请连接该componentDidUpdate方法(而不是使用this.setState回调)。

在此处阅读有关使用 refs 的注意事项的更多信息。