将单击处理程序传递给子级 - Reactjs

Question

我想将一个 onClick 事件从我的父级反应组件传递给子级，但我尝试了几种不同的方法，但所有这些都会导致“空”参数。 // parent removeImage(event, item, params){     console.log('deleted', item, params)     event.stopPropagation();   } render() {    const props = this.props;    const params = props.match.params;    const item = props.item;    const images = props.images;    var i = images.map(image => {      return <ImageComponent remove={(e) => this.removeImage(e, item, params)}/>  })    return (     <div>        {i}    </div>    );// child   internalRemove = event => {    this.props.remove(event);  }    <i className="fas fa-trash remove" onClick={this.internalRemove} />

Answer 1

我认为更有意义的是将item和params作为道具实际传递给ImageComponent. 然后通过孩子使用这些道具。

 // parent

 removeImage(event, item, params){

     console.log('deleted', item, params)

     event.stopPropagation();

   }

 render() {

    const props = this.props;

    const params = props.match.params;

    const item = props.item;

    const images = props.images;

    var i = images.map(image => {

      return <ImageComponent remove={this.removeImage} params={params} item={item}/>

  })

// child 

  internalRemove = event => {

    this.props.remove(event, this.props.item, this.props.params);

  }

    <i className="fas fa-trash remove" onClick={this.internalRemove} />

假设孩子是一个类组件，那应该可以工作。

Answer 2

只需尝试将remove道具直接传递给子 onClick 事件：

class ImageComponent extends React.Component {

  render() {

    return (

      <button className="square" onClick={this.props.remove}>

        Click me

      </button>

    );

  }

}

class Parent extends React.Component {

 removeItem (event, someValue) {   

  console.log('deleted', someValue)

  console.log(event.target)     

 }

 render() {

 const {props} = this

 const test = props.customProps

  var i = [1,2].map(image => {

   return <ImageComponent remove={(e) => this.removeItem(e, test)}/>

  })   

  return (

   <div>

    {i}

   </div>

  );

 }

}

class GrandParent extends React.Component {

  render() {

    return (

     <Parent customProps={'test'} />

    );

  }

}

ReactDOM.render(

  <GrandParent />,

  document.getElementById('react')

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='react'></div>