时间戳

首页 > 解决方案 > onClick 附加到超链接不运行

reactjs - onClick 附加到超链接不运行

问题描述

当我单击<a href onClick>Fire</a>or<a href onClick>Storm</a>时，控制台应该!!!!!!!!!!!!!从接收toggle()，但它没有。知道为什么吗？

const Map = ({ eventData, center, zoom }) => {
    //location box after click
    const [locationInfo, setLocationInfo] = useState(null);
    const [infoBox, setInfoBox] = useState(true);
    const [idx, setIdx] = useState(eventData);

    
    const toggle = (index) => {
        console.log('!!!!!!!!!!!!!');
        setIdx(idx.filter((ev) => ev.categories[0].id === index));
    }
    

    return (
        <div>
            <div id="mySidenav" className="sidenav">
                <a href="" id="Fire" onClick = {() => toggle(10)}>Fire</a>
                <a href="" id="Storm" onClick = {() => toggle(8)}>Storm</a>
            </div> 
 
            <Header/>
            {/*reload this component*/}
            <div className="map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: process.env.REACT_APP_API_KEY }}
                    defaultCenter={ center }
                    defaultZoom={ zoom }
                >
            {idx.map((ev, index) => {
                if(ev.categories[0].id === 8 || ev.categories[0].id === 10) {
                    console.log("idx");
                    return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
                        setLocationInfo({ id: ev.id, title: ev.title });
                        setInfoBox(!infoBox);
                    }} />
                }
            })}
                </GoogleMapReact>
 
                {infoBox && 
                    <div  onClick={()=> setInfoBox(!infoBox)}>
                        {locationInfo && <LocationInfoBox info={locationInfo}/>}
                    </div>
                }
            </div>
        </div>
    )
}

标签： reactjs

解决方案

不需要添加href属性。该onClick事件将被触发：

<a onClick={()=> console.log("click")}>Fire</a>

如果您不会使用它，那么您不需要放置它。

推荐阅读