我正在使用React。我试图改变被点击的图片的样式。但是状态被应用到使用此函数的所有元素。 onClick事件应用于图片。点击其中一个,其他图片的边框颜色应该改变为#a2a0ff。只有被点击的图片应该有颜色#4D4AFF。
import React from "react"; import './SearchPower.css'; import { YMaps, Map, Placemark} from '@pbe/react-yandex-maps'; function App() { // 定义用户地理位置 var getLocationPromise = new Promise((resolve) => { navigator.geolocation.getCurrentPosition(async function (position) { resolve([position.coords.latitude, position.coords.longitude]) }) }) var [lat, setLat] = React.useState(0) var [lng, setLng] = React.useState(0) getLocationPromise.then((location) => { setLat(location[0]) setLng(location[1]) }) if (lat == 0 && lng == 0) { lat = 55.75 lng = 37.57 } // 创建地图 var myMap = React.useMemo( () => ({ center: [lat, lng], zoom: 9 }) ); // 处理标记 const [imageHref, setImageHref] = React.useState("images/Marks/ZemMark.png"); const [ImgStyle, setImgStyle] = React.useState() function changeGeoPosition(newLink) { setImageHref(newLink); setImgStyle("5px solid #4D4AFF") } return ( <div className="ContextSP"> <div className="DivMarks"> <img className="MarkLeftImage" src="images/Marks/ZemMark.png" onClick={function() {changeGeoPosition("images/Marks/ZemMark.png")}} style={{borderBottom: ImgStyle}}/> <img className="MarkImage" src="images/Marks/Redcar1Mark.png" onClick={function() {changeGeoPosition("images/Marks/Redcar1Mark.png")}} style={{borderBottom: ImgStyle}}/> <img className="MarkImage" src="images/Marks/Redcar2Mark.png" onClick={function() {changeGeoPosition("images/Marks/Redcar2Mark.png")}} style={{borderBottom: ImgStyle}}/> <img className="MarkImage" src="images/Marks/GreencarMark.png" onClick={function() {changeGeoPosition("images/Marks/GreencarMark.png")}} style={{borderBottom: ImgStyle}}/> <img className="MarkRightImage" src="images/Marks/YellowcarMark.png" onClick={function() {changeGeoPosition("images/Marks/YellowcarMark.png")}} style={{borderBottom: ImgStyle}}/> </div> <YMaps> <Map style={{width: '100%', height: '100%', margin: '0 0 10px 0', border: '3px solid #4D4AFF'}} state={myMap}> <div id="Prnt"> <Placemark geometry={[lat, lng]} options={{ iconLayout: 'default#image', iconImageHref: imageHref, iconImageSize: [40, 40], iconImageOffset: [0, 0], iconOffset: [-5, -38] }} id="myPosition"></Placemark> </div> </Map> </YMaps> </div> ) } export default App;
您只有一个名为
ImgStyle
的变量,它应用于所有图像的样式,并且其值设置为所有onclick
事件,所以它们的样式总是相同的。要以这种方式做到这一点,您需要5个单独的状态变量 - 每个图像一个。但我假设您实际上只想在最多一个图像上显示边框 - 刚刚点击的那个图像 - 在这种情况下,您根本不需要单独的状态变量。只需根据当前的
imageHref
和图像的实际href计算样式:然后为每个图像应用它(下面仅显示一个示例,但应该很明显如何应用于其他图像):
您还可以通过创建一个
href
字符串数组,并通过map
函数遍历生成每个img
标签来进一步简化此过程。