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

Question

我试图在用户点击某个列表项后删除该列表项。

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

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>

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

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

Answer 1

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>

Answer 2

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

来自官方React documentation

When to Use Refs There are a few good use cases for refs:

Managing focus, text selection, or media playback.

Triggering imperative animations.

Integrating with third-party DOM libraries.

但在您的情况下 我们可以使用 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>

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

Strike through any item in a list created using material ui and Reactjs

javascript

reactjs

material-ui

strikethrough