如何通过地图功能将功能属性传递给儿童 /孙子?(并从州删除项目)

Question

我已经制作了一个简单的React TaskSt列表，这使我可以添加新任务。我现在希望能够删除任务，但看不到如何将功能属性传递给儿童/孙子组件。

我想将deleteTaskFromState功能属性传递给<Task />组件。我已经成功地使用了addTaskToState函数完成此操作，但是看不到如何使用deleteTaskFromState功能prop。

codepen在这里

在第108行上，我已经将deleteTaskFromState传递到<TaskList />组件，但是当我将deleteTask={this.props.deleteTaskFromState}放在<Task />组件上(第57行(时，它错误地将其读取未定义的属性"道具"。

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

通过此属性后，我需要完成函数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>
        );
    }
}