时间戳

首页 > 解决方案 > 如何在 React 的列表中插入复选标记？

reactjs - 如何在 React 的列表中插入复选标记？

问题描述

我正在做一个 ReactJS 项目。我试图显示一个城市列表，其中列表元素是可选的。当我们选择一个列表元素时，我应该在它的末尾显示一个复选标记。我做了显示部分，但我无法插入复选标记。这个复选标记应该在那里，直到我们取消选择它。任何人都可以帮助解决插入复选标记的问题吗？

function NonIdiomaticList(props) {
  let array = [];
  for(let i = 0; i < props.items.length; i++) {
    array.push(
      <Item key={i} isSelectable item={props.items[i]} />
    );
  }

标签： reactjs

解决方案

您需要为项目选择创建回调，此回调必须执行 setState，然后您根据isSelected属性在项目中显示复选标记。

像这样的东西：

function selectItem(index) {
  const selectedIndices = new Set(this.state.selectedIndices);
  if(selectedIndices.has(index)) {
    selectedIndices.delete(index) // Remove if it's already present
  } else {
    selectedIndices.add(index);
  }
  this.setState({selectedIndices}); // This will force the re-render of the component
  return;
}

function NonIdiomaticList(props) {
  let array = [];
  for(let i = 0; i < props.items.length; i++) {
    array.push(
      <Item
         key={i}
         isSelected={this.state.selectedIndices.has(i)}
         onSelect={() => this.selectItem(i)}
         isSelectable
         item={props.items[i]}
       />
    );
  }

记得在组件构造函数中绑定 selectItem 函数。显然<Item />组件需要公开这两个属性：

  1. isSelected作为布尔值
  2. onSelect作为回调

推荐阅读