反应JS'这'不按预期工作

Question

我有以下代码

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在回调函数中是不可访问的。这是范围问题吗？

请参阅演示here

Answer 1

使用refs的正确位置在特定React lifecycle methods内，例如ComponentDidMount，ComponentDidUpdate。

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

详细了解the cautions of working with refs here。

Answer 2

我检查了你的代码，一切正常。问题在于你的逻辑。

让我解释你哪里出错了。

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

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

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