如何通过map函数将函数属性传递给子/孙？ （并从州删除项目）

Question

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

我想将deleteTaskFromState函数属性传递给<Task />组件。我已成功使用addTaskToState函数完成此操作，但无法查看如何使用deleteTaskFromState函数prop。

Codepen here

在第108行，我已将deleteTaskFromState传递给<TaskList />组件，但当我将deleteTask={this.props.deleteTaskFromState}放在<Task />组件（第57行）上时，它会出错无法读取属性＆＃39;道具＆＃39;未定义的。

如果有人可以提供帮助，我将非常感激！

在传递此属性之后，我需要完成函数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>
        );
    }
}