javascript - 如何通过map函数将函数属性传递给子/孙子？ (并从状态中删除项目)

Question

我制作了一个简单的 react 任务列表，它允许我添加新任务。我现在希望能够删除任务，但无法了解如何将函数属性传递给子/孙组件。

我想通过 deleteTaskFromState函数属性一直到 <Task />成分。我已经使用 addTaskToState 成功完成了此操作函数，但看不到如何使用 deleteTaskFromState 来做到这一点函数属性。

Codepen here

在第108行我已经通过了deleteTaskFromState到<TaskList />组件，但是当我输入 deleteTask={this.props.deleteTaskFromState} 时关于<Task />组件(第 57 行)出现错误，无法读取未定义的属性“props”。

如果有人能提供帮助，我将不胜感激!

传递此属性后，我需要完成函数 prop deleteTaskFromState从状态中删除选定的任务，如果有人也知道如何做到这一点，那就太好了!

// function to generate unique id for react keys - use npm uuid usually
function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() 
    // + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

class TaskInput extends React.Component {
    createTask(event){
        event.preventDefault();
        let task = {
            key: guid(),
            task : this.refs.task.value,
            priority : this.refs.priority.value,            
        }       
        this.props.addTaskToState(task);        
        this.refs.addTaskForm.reset();
    }

    render() {
        return (
            <form onSubmit={this.createTask.bind(this)} ref="addTaskForm">
                <input placeholder="enter a task" ref="task" />
                <input placeholder="priority" ref="priority" />
                <button type="submit">Submit</button>               
            </form>
        );
    }
}

class Task extends React.Component {
    render() {
        return (
            <div>
                <li className="task"><button>x</button> 
                <strong> {this.props.taskdata.priority} </strong>  
                {this.props.taskdata.task}</li>
            </div>
        );
    }
}

class TaskList extends React.Component {
    render() {
        if(this.props.deleteTaskFromState) {
            console.log('deleteTaskFromState found')
        }

         let TaskItems;
         if(this.props.taskstate){
            TaskItems = this.props.taskstate.map(function (taskdata)  {
                return (
                    <Task taskdata={taskdata} key={taskdata.key}/>
                );
            });
         }

        return (
            <ul className="task-list">
                {TaskItems}
            </ul>
        );
    }
}

class TaskListApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tasks : [ 
            { 
                key: "task1",
                task: "dance",
                priority: "superhigh",
              },
            { 
                key: "task2",
                task: "tax return",
                priority: "superlow",
            }
            ]
        };
    }

    deleteTaskFromState(keyToDelete) {
        let tasks = this.state.tasks;
        // find object in state array with keyToDelete 
        // remove object
    }

    addTaskToState(task) {
        let tasks = this.state.tasks;
        tasks.push(task);
        this.setState({tasks:tasks});
    }

    render() {
        return (
            <div>
                <h1>Task List</h1>
                <TaskInput addTaskToState={this.addTaskToState.bind(this)} />
                <TaskList 
                    taskstate={this.state.tasks} 
                    deleteTaskFromState={this.deleteTaskFromState.bind(this)}  
                    />
            </div>
        );
    }
}

ReactDOM.render(<TaskListApp />, document.getElementById("app"));

Answer 1

您所要做的只是传递deleteTaskFromState

像您对 addTaskToState 所做的那样到子/孙子

CodePen

class Task extends React.Component {
    deleteTask() {
     this.props.deleteTaskFromState(this.props.taskdata.key)
   }

    render() {
        return (
            <div>
                <li className="task"><button onClick={this.deleteTask.bind(this)}>x</button>
                <strong> {this.props.taskdata.priority} </strong>  
                {this.props.taskdata.task}</li>
            </div>
        );
    }
}

class TaskList extends React.Component {
    render() {
        if(this.props.deleteTaskFromState) {
            console.log('deleteTaskFromState found')
        }

         let TaskItems;
         if(this.props.taskstate){
       let deleteTaskFromState = this.props.deleteTaskFromState;
            TaskItems = this.props.taskstate.map(function (taskdata)  {
                return (
                    <Task
   taskdata={taskdata}
   key={taskdata.key}
   deleteTaskFromState={deleteTaskFromState} />
                );
            });
         }

        return (
            <ul className="task-list">
                {TaskItems}
            </ul>
        );
    }
}