删除使用材质 ui 和 Reactjs 创建的列表中的任何项目

Posted 2023-05-07

【中文标题】删除使用材质 ui 和 Reactjs 创建的列表中的任何项目

【英文标题】：Strike through any item in a list created using material ui and Reactjs

【发布时间】：2020-07-04 13:36:47

【问题描述】：

一旦用户点击了某个列表项，我就会尝试删除该特定项。

我创建了一个函数来进行样式更改

const completed = () =>
     return document.getElementById("demo").style.textDecoration='line-through'
;

列表生成如下，我使用了材质ui库

 <List dense=dense >
      items.slice(0).reverse().map(x=> (
           <ListItem key=x.id button id="demo" onClick=completed divider>
                 <ListItemText primary=listItems(x)/>
                 <ListItemSecondaryAction />
           </ListItem>

       ))                              
</List>

从我编写的代码中，我只能遍历列表的第一项。每当我添加新项目时，我唯一能够删除的项目总是第一个项目。

我正在尝试找到一种方法将其应用于列表中的所有元素

【参考方案1】：

在 React 中使用 document.getElementById() 不是一个好习惯，因为这样你就直接访问了 DOM。相反，您必须使用ref。

来自官方React documentation

何时使用 refs 有几个很好的 refs 用例：

管理焦点、文本选择或媒体播放。 触发命令式动画。 与第三方 DOM 库集成。

但在你的情况下，我们可以使用 React state 轻松做到这一点。我假设您的items 存储在您的组件state 中，并且在待办事项中，您需要存储它是否已完成（布尔值）。您可以像下面这样更新代码。

const completed = (id) => 
   /* update the state by changing the completed value of the
      clicked todo item */
   this.setState(
      items : this.state.items.map(item => 
         if(item.id === id)
            item.completed = true;
         
         return item;
      )
   )



<List dense=dense>
  this.state.items
    .reverse()
    .map(x => (
      <ListItem
        key=x.id
        button
        // add a unique id
        id=x.id
        
        // add a strike style depending on the completed property of the todo item
        style= textDecoration : x.completed ? 'line-through' : 'none'  
        
        // call completed with the id
        onClick=() => completed(x.id) 

        divider
      >
        <ListItemText primary=listItems(x) />
        <ListItemSecondaryAction></ListItemSecondaryAction>
      </ListItem>
    ))
</List>

【讨论】：

嘿，如果给定的答案之一解决了您的问题，请将其标记为答案。

这是正确答案。接受另一个答案而不是这个是误导。

【参考方案2】：

ID 在 html 中应该是唯一的。您应该为每个元素添加动态 id 值并在函数调用中发送 id，如下所示。

const completed = (id) => 
 document.getElementById(id).style.textDecoration='line-through'


<List dense=dense>
  items
    .slice(0)
    .reverse()
    .map(x => (
      <ListItem
        key=x.id
        button
        id=x.id // Add dynamic ID
        onClick=() => completed(x.id) // Send ID to function
        divider
      >
        <ListItemText primary=listItems(x) />
        <ListItemSecondaryAction></ListItemSecondaryAction>
      </ListItem>
    ))
</List>

【讨论】：

这不是 React 项目的正确答案。它应该列在如何不做下。