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

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

remove

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')
);

将Click处理程序传递给孩子-React.js

2 个答案: