将单击处理程序传递给子级 - 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. 然后通过孩子使用这些道具。&nbsp;// parent&nbsp;removeImage(event, item, params){&nbsp; &nbsp; &nbsp;console.log('deleted', item, params)&nbsp; &nbsp; &nbsp;event.stopPropagation();&nbsp; &nbsp;}&nbsp;render() {&nbsp; &nbsp; const props = this.props;&nbsp; &nbsp; const params = props.match.params;&nbsp; &nbsp; const item = props.item;&nbsp; &nbsp; const images = props.images;&nbsp; &nbsp; var i = images.map(image => {&nbsp; &nbsp; &nbsp; return <ImageComponent remove={this.removeImage} params={params} item={item}/>&nbsp; })// child&nbsp;&nbsp; internalRemove = event => {&nbsp; &nbsp; this.props.remove(event, this.props.item, this.props.params);&nbsp; }&nbsp; &nbsp; <i className="fas fa-trash remove" onClick={this.internalRemove} />假设孩子是一个类组件，那应该可以工作。

Answer 2

只需尝试将remove道具直接传递给子 onClick 事件：class ImageComponent extends React.Component {&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <button className="square" onClick={this.props.remove}>&nbsp; &nbsp; &nbsp; &nbsp; Click me&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; );&nbsp; }}class Parent extends React.Component {&nbsp;removeItem (event, someValue) {&nbsp; &nbsp;&nbsp; console.log('deleted', someValue)&nbsp; console.log(event.target)&nbsp; &nbsp; &nbsp;&nbsp;}&nbsp;render() {&nbsp;const {props} = this&nbsp;const test = props.customProps&nbsp; var i = [1,2].map(image => {&nbsp; &nbsp;return <ImageComponent remove={(e) => this.removeItem(e, test)}/>&nbsp; })&nbsp; &nbsp;&nbsp; return (&nbsp; &nbsp;<div>&nbsp; &nbsp; {i}&nbsp; &nbsp;</div>&nbsp; );&nbsp;}}class GrandParent extends React.Component {&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp;<Parent customProps={'test'} />&nbsp; &nbsp; );&nbsp; }}ReactDOM.render(&nbsp; <GrandParent />,&nbsp; 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>