javascript - 在 React 中将函数作为 prop 传递

Question

我想传递一个handleDelete函数作为 Prop 。在子组件中，我想通过单击那里的按钮从列表中删除特定的待办事项。

constructor(){
    super();
    this.state = {
        key:0,
        temp:'',
        list:[]
    }
}

handleList = () => {

    let { key,temp } = this.state;
    if (temp.length > 0 ) {
        let list = [...this.state.list];
        list.push(<Todo 
            delete = {()=>{this.handleDelete(key)}}
            text = {temp} 
            key = {key}/>);
        this.setState({
            list:list,
            key: this.state.key+1
        });
    }
}

handleDelete = (index) =>{
    let list = [...this.state.list];
    list.splice(index,1);
    this.setState({list});
    console.log('list',list.length);

}


render() {

    return(
        <div className = 'global'>

           <button onClick={() => {this.handleList()}
            }>Add-New</button>
           <button onClick={() => {this.handleDelete(key)}
            }>delete</button>
            <input 
                onChange = {
                    (e)=>{this.setState({
                        temp: e.target.value
                    })}
                }
                type = 'text' 
                placeholder = 'Enter New Todo!'/>
            <hr/>
     </div>

Todo 组件

const Todo = (props) =>{
    return(
        <li>
            <h3>{props.text}</h3>
            <button onClick = {()=>
                props.delete
            }>Del</button>
            <hr/>
        </li>
    );
}

Answer 1

假设您的handleDelete函数执行它所说的操作:您正在做的事情看起来应该有效，只是您实际上并没有调用 <Todo> 中的函数.

您的原始处理程序位于 <Todo>调用返回传入函数的箭头函数，但无法调用传入函数本身。

更改您的组件以调用在 Prop 中传递的函数:

const Todo = (props) =>{
    return(
        <li>
            <h3>{props.text}</h3>
            <button onClick = {() => props.delete()}>Del</button>
            <hr/>
        </li>
    );
}

根据我原来答案的评论，这可以进一步简化:

const Todo = (props) =>{
    return(
        <li>
            <h3>{props.text}</h3>
            <button onClick = {props.delete}>Del</button>
            <hr/>
        </li>
    );
}