ReactJS-將參數傳遞給函數

Question

我很難將參數傳遞給onToggleOpen函數-我渲染了多個標記（此處僅2個用於簡化），當我單擊一個標記時，我想為其顯示相應的InfoWindow 。 但是，當我現在單擊標記時，不會觸發onToggleOpen方法。

如果我從標記以及onToggleOpen刪除索引，則顯示和隱藏InfoWindow框的功能-但是所有InfoWindow框將同時打開和隱藏。

如何正確將索引傳遞給onToggleOpen ？

const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker 
        key='1'
        position={{ lat: -34.397, lng: 150.644 }} 
        onClick={props.onToggleOpen(1)}
    >
        {props.isOpen && 
            <InfoWindow onCloseClick={props.onToggleOpen}>
                <div>Something 1</div>
            </InfoWindow>
        }
    </Marker>
    <Marker 
        key='2'
        position={{ lat: -33.867855, lng: 151.178897 }} 
        onClick={props.onToggleOpen(2)}
    >
        {props.isOpen && 
            <InfoWindow onCloseClick={props.onToggleOpen}>
                <div>Something 2</div>
            </InfoWindow>
        }
    </Marker>
  </GoogleMap>
))
export default class GoogleMapsSample extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          isOpen: false
        }
        this.onToggleOpen = this.onToggleOpen.bind(this);
    }

    onToggleOpen(index){
        console.log('x');
        //this.setState({isOpen: !this.state.isOpen})
        if (this.state.isOpen === index) {
            this.state.isOpen = false;
        } else {
            this.state.isOpen = index;
        }
        console.log(this.state.isOpen);
    }

    render() {
        const { isOpen } = this.state;
        console.log('isOpen: ', this.state.isOpen);
        return (
            // Important! Always set the container height explicitly
            <div style={{ height: '100vh', width: '100%' }}>
                <MyMapComponent 
                    googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDFD30jUKH0Cl8qrZoNCe-eEGQBIfApzE0"
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `400px` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                    isOpen={isOpen}
                    onToggleOpen={this.onToggleOpen}
                />
            </div>
        );
    }
}

編輯 ：我不確定屬性isOpen在這里更改

constructor(props) {
    super(props)
    this.state = {
      isOpen: false
    }
    this.onToggleOpen = this.onToggleOpen.bind(this);
}

...

<Marker 
    key='1'
    position={{ lat: -34.397, lng: 150.644 }} 
    onClick={()=>props.onToggleOpen(1)}
>
    {props.isOpen === 1 && 
        <InfoWindow onCloseClick={props.onToggleOpen}>
            <div>Something 1</div>
        </InfoWindow>
    }
</Marker>

因為從不執行InfoWindow塊。 我以為在更改狀態的函數中有問題：

onToggleOpen(index){
    //this.setState({isOpen: !this.state.isOpen})
    if (this.state.isOpen === index) {
        this.state.isOpen = false;
    } else {
        this.state.isOpen = index;
    }
}

但是此處this.state.isOpen屬性已正確更改（已通過console.log測試）。 但是即使isOpen已更改，但單擊標記后也不會顯示InfoWindow 。

我也試圖像這樣在contructor中設置其值：

this.state = {
  isOpen: false
}

並在加載頁面后顯示InfoWindow ，但是當我單擊標記時， InfoWindow不會發生任何反應，它不會消失並保持顯示狀態（即使onToggleOpen()中的值已正確更改）。

我在這里俯瞰什么？ 我是否將值isOpen錯誤地傳遞給了Marker ？

Answer 1

通過編寫props.onToggleOpen(1) ，實際上是在那里調用該函數。 但我認為您需要在單擊標記時調用它。

因此， Marker組件的正確代碼應為：

<Marker 
    key='1'
    position={{ lat: -34.397, lng: 150.644 }} 
    onClick={()=>props.onToggleOpen(1)}
>
    {props.isOpen && 
        <InfoWindow onCloseClick={props.onToggleOpen}>
            <div>Something 1</div>
        </InfoWindow>
    }
</Marker>

注意()=>props.onToggleOpen(1) 。 現在，當您單擊標記時，它將調用onToggleOpen 。