Question

由于某种原因，我无法在事件处理程序中访问当前目标的属性。我不知道我在做什么错，因为这不应该是一个问题。

元素：

<FontAwesomeIcon travelModeOption="DRIVING" onClick ={this. calculateAndDisplayRoute}size={"lg"} icon={faCar}/>

事件处理程序

calculateAndDisplayRoute = (e)=> {
    let travelModeOption;
    {travelModeOption ? e.currentTarget.getAttribute("travelModeOption") : null};
    let directionsDisplay = new google.maps.DirectionsRenderer;
    let directionsService = new google.maps.DirectionsService;
    directionsDisplay.setMap(this.newMap);
    directionsDisplay.setPanel(document.getElementById('directions'));
    console.log(this.state.start);
    console.log(travelModeOption)
    let start=this.state.start;
    let end = this.state.currentMarker[0].getPosition();
    console.log(end);
    directionsService.route({
      origin: start,
      destination: end,
      travelMode: travelModeOption || 'DRIVING'
    }, (response, status) =>{
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
        this.setState({distance: response.routes[0].legs[0].distance.value});
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    })
  }

Answer 1

点击时，您正在调用其他处理程序onClick={this.calculateRoute}而不是calculateAndDisplayRoute。

将其更改为

onClick={this.calculateAndDisplayRoute}

Answer 2

这个问题有点令人困惑，但是我的猜测是，回调未绑定到原始组件，因此没有this。试试这个：

onClick={this.calculateAndDisplayRoute.bind(this)}

这将注册绑定到原始组件的回调。换句话说，它将在回调函数中将this设置为在实际触发时可用。

事件处理程序中的未定义属性

2 个答案: