Question

我有很好的历史与反应。但今天我遇到了一个非常奇怪的问题。

我有一个汉堡包，它接收一个值列表，并选择一个值，我从父母通过this.refs.child1.setValues()发送。此setValues函数调用setState，并通过反应中的className参数选择一个值。

所以在第一步中我选择20个值中的第一个值。

react选项卡显示了第一个li元素：

className="{something} +class1"

休息所有元素都有：

className="{something}"

哪个好。（＆＃39; class1＆＃39;是在setstate上动态添加的类），dom显示第一个选中的值，其余的未选中。

现在问题出在第二步，因为我选择另一个值说第三个，所以第一个值应该被取消选择，第三个应该被选中，第三个的预期反应值应该是

className="{something} + class1"，其余部分显示className="{something}"

在反应选项卡中正常工作但在元素选项卡中，两个li元素都被选中，因为它们都有class1但class1应该只有第3个元素而不是第一个元素（之前已选中）

Answer 1

由于React使用Virtual DOM工作，因此它只会将DOM中的更改更改为检测到更改的元素。所以，既然你从来没有真正从第一个元素中删除一个类，它永远不会重新渲染它，它只会重新渲染第三个元素，因为那是你实际改变的唯一元素。

你需要做这样的事情：

removeClass() {
    let allLinks = document.querySelectorAll('.something');
    allLinks.map((link) => link.classList.remove('class1'));

    //and here just call the function to add the class to the right 
    //element.
}

在DOM

1 个答案: