第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

將單擊處理程序傳遞給子級 - Reactjs

將單擊處理程序傳遞給子級 - Reactjs

qq_笑_17 2021-11-12 15:30:55
我想將一個 onClick 事件從我的父級反應組件傳遞給子級，但我嘗試了幾種不同的方法，但所有這些都會導致“空”參數(shù)。 // 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} />
查看完整描述

2 回答

?
躍然一笑

TA貢獻1826條經(jīng)驗 獲得超6個贊

我認為更有意義的是將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} />

假設孩子是一個類組件，那應該可以工作。


查看完整回答
反對 回復 2021-11-12
?
慕尼黑的夜晚無繁華

TA貢獻1864條經(jīng)驗 獲得超6個贊

只需嘗試將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>


查看完整回答
反對 回復 2021-11-12
  • 2 回答
  • 0 關注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號