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没有任何反应，它不会消失并保持显示状态（即使{{ 1}}进行了正确的更改。）

我在这里俯瞰什么？我是否将值onToggleOpen()错误地传递给了isOpen？

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。

ReactJS-将参数传递给函数

1 个答案: