将React中不存在的DOM元素的checked属性设置为true

如何解决将React中不存在的DOM元素的checked属性设置为true

我是React的新手，正在研究表的全选功能。

    this.state.selectedAccounts = [];
    this.props.accountList.forEach((account,index) => {
        var row = document.getElementById('accountSelection_' + index);
        if (row !== null) {
            row.checked = checked;

这是我遍历表的选定帐户并传递选中的参数的方式。

现在，问题在于分页，只有当前页面中的帐户返回DOM元素

document.getElementById('accountSelection_' + index);

，因此我只能将选中的参数传递给那些参数，并且仅选中那些复选框。 对于下一页中的帐户

document.getElementById('accountSelection_' + index);

返回null，因此无法通过检查的参数。

所使用的库在选择页面时不提供任何事件，因此无法捕获页面更改事件并将Checked参数传递给视图中的新行。我要一次选中所有复选框。

解决方法

您能告诉我们您使用的是哪个分页库吗？这样会更容易回答您。

我对您的问题的猜测是，分页库仅使用可见元素填充DOM。这意味着您在其他页面中的项目根本不在DOM中，这将解释为什么document.getElementById函数无法恢复它们。

我看到了解决您的问题的不同方法：

1. 找到另一个分页库或自行实现 一个简单的分页，可使用CSS隐藏其他页面的项目。 这将在您的物品中填充dom并使它们 可恢复的。请注意，这种分辨率绝对不是 经过优化，如果您要处理的话，可能会导致性能问题 有很多物品。
2. 如果您是通过道具将商品发送到分页库，则意味着您的商品存储在分页库主要组件状态中。在库文档中查找是否无法通过更改intern属性来检查项目。
3. 亲自检查。您可以将isChecked之类的其他属性添加到您的商品中，然后手动全部选中或取消全部选中。然后，在渲染项目时，可以检查特定项目的内部isChecked属性是否标记为已选中。基于此，您可以轻松地将项目标记为已选中。如果您无法直接控制库如何渲染项目，请尝试找到一个道具，该道具可以让您像onRenderingItem道具一样重载库的项目渲染方法。这是即时通讯的视觉呈现：

// Item interface
interface Item {
  name: string;
  isChecked: boolean
}

// Rendering
{items.map((item: Item) => 
 <button checked={isChecked} >{name}</button> 
)}

希望我至少对您有所帮助。随时回答我：）

编码愉快！