Question

我正在从事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]} />
    );
  }

Answer 1

您需要为商品选择创建一个回调，该回调必须执行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 />组件需要公开这两个属性：

isSelected为布尔值
onSelect作为回调

Answer 2

您可以使用setState维护选定/未选定项目的状态。

将项目更改为具有选定属性的布尔对象。像这样的{name: city, selected: false}
查看所有项目并创建列表

this.state.items.map((item, index) => <Item key={index} selected={item.selected} name={item.name} handleSelect={this.handleSelect(index)})
在单击时通过该项目的索引更新要选择的项目

handleSelect(i) { let {items} = this.state; items = items.map((item, index) => { if(index === i) { item.selected = !item.selected } return item; }); }

我现在使用索引来选择/取消选择该项目。您可以即兴使用uniqueID或商品名称本身来实现相同的目的。

如何在React的列表中插入一个选中标记？

2 个答案: