反應待辦事項應用程序，刪除任務的問題

Question

我正在使用 React 開發 todo 應用程序，但我遇到了奇怪的問題。 我在垃圾桶圖標上創建了 onClick 效果以刪除整個任務組件。 問題是，有時它有效（刪除整個任務），有時無效（僅刪除圖標）。 我嘗試了不同的解決方案，但老實說，我不知道它為什么會這樣工作，這是同一個腳本在不同的組件中工作方式不同，出於某種原因。

主要成分：

import React from 'react'
import TaskContainer from './TaskContainer.js';
import SingleTask from './SingleTask'

class AppContainer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            children: [],
            numChildren: 0,
            newMessage: "What to do next?"
        }
        this.onAddChild = this.onAddChild.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

    onAddChild = (msg) => {
        let newArray = this.state.children.concat(<SingleTask message={msg} />);

        this.setState({ children: newArray });
        console.log(this.state.children)
    }

    handleChange(event) {
        this.setState({ newMessage: event.target.value })
    }

    render() {
        return (
            <div className="app-container">
                <div className="new-task-container">
                    <input type="text" id="taskInput" defaultValue="What to do next?"
                        maxlength="50" onChange={this.handleChange} />
                    <div className="addTask" id="addTask" onClick={
                        () => {
                            let text = document.getElementById("taskInput").value;
                            this.setState({ newMessage: text })
                            this.onAddChild(this.state.newMessage);
                        }
                    }>
                        <div className="add-button">Add task</div>
                    </div>
                </div>
                <TaskContainer>
                    {this.state.children}
                </TaskContainer>
            </div>
        )
    }
}
export default AppContainer

子組件

import SingleTask from './SingleTask.js';

function TaskContainer(props) {
    return (
        <div className="task-container">
            {props.children}
        </div>
    )
}

export default TaskContainer 

child 的子組件 - SingleTask

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrashAlt } from '@fortawesome/free-regular-svg-icons'

class SingleTask extends React.Component {
    constructor(props) {
        super(props)
        this.state = { active: true }
    }
    render() {
        return (
            <div className="singleTask" >
                <p>{this.props.message}</p>
                <div className="removeTask" onClick={(event) => {
                    setTimeout(() => {
                        event.target.parentNode.parentNode.remove()
                    }, 350)
                }
                }>
                    <FontAwesomeIcon icon={faTrashAlt} />
                </div>
            </div>
        )
    }
}

export default SingleTask

提前致謝

Answer 1

我創建了一個包含所有必要更正的 CodeSandbox。

https://codesandbox.io/s/upbeat-jang-v7jvm

忠告：在使用 React 的時候不建議自己修改 DOM。