如何在React中将单击事件从父元素传递给子元素? [ C ]

时间:2018-01-05 02:54:27

标签: javascript reactjs

点击祖先标签时,我希望使用window.open()打开下面的链接。

我知道道具很容易传递给孩子,但这没有用。

子元素如下所示:

import React from 'react';

class FramePageFaveTagFave extends React.Component {

  constructor(props) {
    super(props);
  }

  bookmarkClicked (url) {
    window.open(url, '_blank')
  }

  render () {
    let bm = this.props.bookmark;
    let tagClicked = this.props.tagClicked;

    return (
      <div className='bookmark_div' id={bm.id + 'a'} onClick={() => {this.bookmarkClicked(bm.url)}} >
        <img className='bookmark_image' id={bm.id + 'c'} src={'../_favicons/' + bm.favicon_local}/>
        <a className='bookmark_link' id={bm.id + 'b'} href={bm.url} target='_blank'
          onClick={()=>{e.preventDefault();}}>
          {bm.title}
        </a>
      </div>
    );
  }
}

export default FramePageFaveTagFave;

1 个答案:

答案 0 :(得分:0)

一个好的经验法则是在进行此类工作时考虑回调。父母可以传递一个名为onBookmarkClicked的支柱,这是一个url的函数。也许这个:

onBookmarkCalled(url) {
   window.open(url, '_blank')
}

<ChildBookmark onBookMarkCalled={this.onBookmarkCalled} />

你在孩子身上做同样的事情,除了this.bookmarkClicked你可以做onClick={() => this.props.onBookmarkClicked(url)}

相关问题