Javascript ReactJS-将参数传递给函数

我很难将参数传递给

onToggleOpen

函数-我渲染多个标记（这里只有2个用于简化），当我单击一个标记时，我想为它显示相应的

InfoWindow

。但是当我现在单击标记时，不会触发方法

ontogleOpen

如果我从标记和

ontogleOpen

中删除索引，则显示和隐藏

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>
        );
    }
}

但是在这里，

this.state.isOpen

属性被正确更改（使用

console.log

进行测试）。但是，即使更改了

isOpen

，单击标记后也不会显示

InfoWindow

我还尝试在constructor中设置其值，如下所示：

this.state = {
  isOpen: false
}

加载页面后会显示

InfoWindow

，但当我单击标记时，

InfoWindow

不会发生任何变化，它不会消失并保持显示状态（即使

ontogleOpen（）

中的值已正确更改）

---

我在这里俯瞰什么？我是否将值

isOpen

错误地传递给了

标记

？

通过编写

props.ontogleOpen（1）

实际上是在那里调用函数。但我认为你需要在点击标记时调用它

因此，

标记

组件的正确代码应如下所示：

<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.ontogleOpen（1）}
>
{props.isOpen&&
一点
}

---

注意

（）=>props.ontogleOpen（1）

。现在，当您单击标记时，将调用

onToggleOpen

。

地图组件是否只有两个标记？或者它将是动态的，并且有许多标记？您现在的做法是，将值硬编码到每个值中并不是一个明智的、可伸缩的想法。它将有许多标记，但为了简化，我只在脚本中添加了2个标记。@DanielZuzevich看起来props.ontogleOpen传递正确，但我认为props.isOpen传递不正确，因为更改的属性不会反映在标记中。我已经编辑了这篇文章来展示这个问题。谢谢你在任何情况下都不应该使用setState哦，我花了将近2个小时思考这个问题，完全忘记了

this.setState（{isOpen:index}）。反应还是新的，所以我需要时间把新学到的东西准备好。非常感谢。内联箭头功能将工作。这应该给他所需要的。@inussha，@DanielZuzevich它看起来像是
props.ontogleOpen
被正确地传递了，但是我认为
props.isOpen
没有正确地传递，因为更改的属性没有反映在
标记中。我已经编辑了这篇文章来展示这个问题。非常感谢。
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: false
}

<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>