美文网首页
🌟🌟🌟🌟🌟:react中子组件回调父组件函数传递参数

🌟🌟🌟🌟🌟:react中子组件回调父组件函数传递参数

作者: 达摩会武术 | 来源:发表于2019-03-21 13:32 被阅读0次
    React子组件回调父组件函数传递参数.jpg

    这个问题呢,还是先研究下师尊给的秘籍比较好

    传参数

    export class EventApp extends React.Component {
    
      deleteById(id, e) {
        console.log(`Delete id: ${id}`);
      }
      
      render() {
        return (
          <div>
            // 方式一: 使用 bind
            <button onClick={this.deleteById.bind(this, 15)}>传参方式1</button>
            // 方式二: 使用箭头函数
            <button onClick={e => this.deleteById(15, e)}>传参方式2</button>
          </div>
        )
      }
    }
    

    看使用箭头函数的方式2:可以知道,其实上面问题中的其实是将事件对象e去掉的一种简化写法,因为我们这里并不需要事件对象e;
    而直接使用this.props.deleteItem(index),index就相当于方式2里面的事件对象e,没办法通过这样直接调用传递参数。

    ()=>{ this.props.deleteItem(index)}   ⬇️
    (e)=>{this.props.deleteItem(index,e)}
    

    相关文章

      网友评论

          本文标题:🌟🌟🌟🌟🌟:react中子组件回调父组件函数传递参数

          本文链接:https://www.haomeiwen.com/subject/uydqvqtx.html