javascript - React - 在作为 props 传递的单击处理程序中传递组件 props

Question

我是 React 新手。我有一个像这样的 react 组件 Child -

//this.props has obj = {'id': 123, 'name': 'abc'}
class Child extends React.Component{

    constructor(props){
        super(props);
    }
    render(){
        return(
            <div onClick={this.props.remove}></div>
        );
    }
}

此组件正在从某个 Parent 组件中使用，该组件具有此类 Child 组件的列表，每个组件都有自己的 this.props.obj。 this.props.remove 是从 Parent 传递给 Child 的另一个处理程序。

现在，单击从 Child 组件重新渲染的 div 时，我想在删除函数中传递 this.props.obj.id 。我怎样才能做到这一点。

谢谢

Answer 1

欢迎 react !

You can learn about event handlers here

我会这样写；

class Child extends React.Component{

    constructor(props){
        super(props);
    }

    handleClick({id}) {
       this.props.remove(id)
    }

    render(){
        const obj = this.props
        return(
            <div onClick={() => this.handleClick(obj)}></div>
        );
    }
}