Question

所以我在这里有这个定义：

const generateList = props => {
...
    item = <ListItemEl
          icon='directions'
          text={'Directions'}
          onClick={props.openGoogleMaps(coords)}
        />
...
}

const SideList = props => {
  const listItems = generateList(props)

  return (
    <List>
      {listItems}
    </List>
  )
}

但是onClick操作未绑定到该特定ListItemEl。

onClick在此ListItemEl所属的组件树上向上调用。

openGoogleMaps已成功调用，但单击的不仅是ListItemEl。

这是传递openGoogleMaps时的父组件。

    class index extends Component {

      openGoogleMaps(coords) {
        const center = PolygonCenter(coords)
        window.open(
          "https://www.google.com/maps/dir/?api=1&destination=" +
            center.coordinates[0] +
            "," +
            center.coordinates[1]
        )
      }

    ...

      {context.state.drawerOpen ? <SideList data={this.props.data} openGoogleMaps={this.openGoogleMaps}/> : null} 
}

我猜想这与将openGoogleMaps绑定到该特定ListItemEl有关，但是当我尝试使用'this.props.openGoogleMaps（coords）.bind（this）'实现此操作时或类似的onClick不再在任何地方使用。

我还猜想这与我在定义“ const”与组件方面的知识差距有关。以前，当我使用bind时，我在函数im绑定前使用了“ this”，但是由于ListItemEl是在const中定义的，所以我无法使用 '这个'。请，谢谢你

这也是发生问题的分支，存储库和文件https://github.com/CodeForCary/cary-connects-web/blob/googlemaps/src/components/Drawer/SideList.js

在全局动作的组件外部调用onClick

0 个答案: