时间戳

首页 > 解决方案 > React 上的问题，onClick 取最后一个变量并记下选择的变量

javascript - React 上的问题，onClick 取最后一个变量并记下选择的变量

问题描述

const CharacterList = () => {



    const [change, setChange] = React.useState(false);

    const QuickSilver= () => setChange(!change);
    const SuperMan= () => setChange(!change);





return (
    <div id="character" className="list">
        
        <img id="icons" className="one" src={QuickSilverIc} onClick={QuickSilver} />
            {change && (
                <img className="card" src={QuickSilverStat} />
            )}
        <img id="icons" className="two" src={SuperManIc}  onClick={SuperMan} />
            {change && (
                <img className="card" src={SuperManStat} />
            )}

所以，当我点击 QuickSilver img 时，它会给我带来带有 src={SuperManStat} 而不是 {QuickSilverStat} 的 img 如果有人可以帮助我，那就太好了！ps：是的，我已经削减了反应组件，只向你展示我想要的，我已经正确地完成了所有事情，比如导入导出等......

标签： javascriptreactjsreact-hooks

解决方案

据我了解，您只想显示其中一个。为此，您应该将每张图片的两个图像包装在一起，并在每个更改值（真或假）上只显示其中一个：

{change && (
    <div>
      <img id="icons" className="one" src={QuickSilverIc} onClick={QuickSilver} />
      <img className="card" src={QuickSilverStat} />
    </div>
)}
{!change && (
    <div>
      <img id="icons" className="two" src={SuperManIc}  onClick={SuperMan} />
      <img className="card" src={SuperManStat} />
    </div>
)}

推荐阅读