javascript - 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 block 永远不会执行。我认为在我更改状态的函数中出了问题:

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 也永远不会显示。

我也尝试在构造函数中设置它的值，如下所示:

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。