Question

我是ReactJS的新手，我开始了一个简单的CRUD项目，仅供练习。所以，我有一张桌子，我想添加一个类，以便当我按下按钮时该元素消失

问题是当我按下删除按钮时，React向所有元素添加了一个类，而所有元素都消失了

如何仅删除单击按钮的父元素？我试图获取事件的ID，但是我不知道如何指定要添加类的元素。

deleteTask(e, id){
  //let trDelete = 
  e.currentTarget.parentNode.getAttribute('key');
  M.toast({html: 'Task Deleted'})
  const currState = this.state.active;
  this.setState({active: !currState});

    }

{
this.state.tasks.map(task => {
    return (
        <tr data-key={task._id} key={task._id}  className={this.state.active ? "scale-transition scale-out": ""}>
            <td>{task.title}</td> 
            <td>{task.description}</td>
            <td>
                <button className="btn light-blue darken-4" onClick={(e) => this.deleteTask(e, task._id)}>
                    <i className="material-icons">
                        delete
                    </i>
                </button>
                <button className="btn light-blue darken-4" style={{margin: '4px'}}>
                <i className="material-icons">
                        edit
                    </i>
                </button>
            </td>
        </tr>
    )
  })
 }

Answer 1

要逐项应用CSS类，您将需要通过添加额外的组件状态来跟踪每个项目的类。

一个简单的解决方案是更新您的deleteTask()函数：

deleteTask = (event, taskId) => { 

    this.setState(state => {

        /* 
        Iterate each task in state, and add isDeleted to task(s) with matching id 
        */
        return { 
            tasks : state.tasks.map(task => 
            (taskId === task._id ? { ...task, isDeleted : true } : { ...task }))
        };

    }, () => {

        /*
        Show toast popup after stat change
        */
        M.toast({html: 'Task Deleted'});
    });
}

然后更新表格渲染以说明新的isDeleted项目状态：

<tr data-key={task._id} key={task._id}  
    className={ task.isDeleted ? "scale-transition scale-out": ""}>
    { /* Existing table markup */ }
</tr>

Answer 2

该类将被添加到所有这些类中，因为您要遍历每个项目，并根据active不变为每个任务项目分配该类。

如果您要删除或隐藏任务，则setState应该影响this.state.tasks而不是this.state.active。

我猜你的更新和状态看起来像这样：

deleteTask(e, id) {

  // Return new task objects to prevent mutation of state
  const tasks = this.state.tasks.map(task => {
    return task.id === id ? {...task, active: !task.active} : {...task};
  });

  // Executes callback after state update is complete
  this.setState({tasks}, () => M.toast({html: 'Task Deleted'}));
}

免责声明：我不知道您正在使用什么进行转换，因此您可能必须使用等效于对象传播和属性速记的方式。

向ReactJS中的某个元素添加类

2 个答案: