如何在反应中访问事件上的当前元素？

Question

代码：

class Locations extends React.Component {
    render() {
        let { home, work, onChange } = this.props;
        return <div className="controls">

            <GoogleMapLoader
                containerElement={
                    <div
                        {...this.props}
                        style={{
                            height: '100%'
                        }} >
                    </div>
                }
                googleMapElement={
                    <GoogleMap
                        ref="map"
                        defaultZoom={15}
                        center={{
                            lat: 47.6205588,
                            lng: -122.3212725,
                        }}
                    >
                        <SearchBox
                            ref="searchBoxHome"
                            placeholder="Home"
                            controlPosition={google.maps.ControlPosition.TOP_LEFT}
                            onPlacesChanged={onChange(this.refs.searchBoxHome.getPlaces(), 'home')}
                        />
                        ...

错误：

TypeError: this.refs.searchBoxHome is undefined

我不确定如何将元素上的方法正确绑定到我传入的 onChange 函数。

操作：

export const changeAddress = (places, place) => {
    return {
        type: 'CHANGE_ADDRESS',
        places,
        place
    }
};

Answer 1

您可以尝试使用 arrow function，像这样

<SearchBox
  ref="searchBoxHome"
  placeholder="Home"
  controlPosition={ google.maps.ControlPosition.TOP_LEFT }
  onPlacesChanged={
    () => onChange(this.refs.searchBoxHome.getPlaces(), 'home')
  }
/>

Answer 2

默认将event传递给函数，您可以通过event.target访问元素。

onChange(element, home) {
  ...
}

和

<SearchBox
  ref="searchBoxHome"
  placeholder="Home"
  controlPosition={google.maps.ControlPosition.TOP_LEFT}
  onPlacesChanged={event => onChange(event.target, 'home')}
/>

如何在反应中访问事件上的当前元素？

How to access current element on event in react?

javascript

reactjs

redux