单击时更改卡片样式答案

【问题标题】：Changing card style when clicked单击时更改卡片样式
【发布时间】：2021-11-03 13:33:48
【问题描述】：

我正在将数据映射到卡片中，卡片的onClick，它表明它通过背景颜色更改和输入框被选中而处于活动状态。这是我的代码。我正在将数据映射到卡片中，所以我正在渲染卡片列表。 onClick 卡，它通过更改背景颜色和检查输入框显示它处于活动状态。当我单击它时它被选中，但是当它导航到每个 id 的新路线时，它被取消选中。这是卡片组件的代码。

import React, { useState } from "react";
import { useHistory } from "react-router";
import styled from "styled-components";

export default function Card(props) {
  const {item,id} = props;

  const [checked, setChecked] = useState(false);
  const [background, setBackground] = useState("#F3F1FA");
  const [cardBorder, setCardBorder] = useState("transparent");
  const history = useHistory();

  const CheckBox = () => { 
    setChecked(!checked);
    if (checked === true) {
      setBackground("#F3F1FA");
      setCardBorder("transparent");
    } else {
      setBackground("#fff");
      setCardBorder("2px solid #7f67ce");
    }
  };
  
  return (
    <CardWrapper
      onClick={()=>{
      CheckBox();
      // console.log(props.id)
      history.push(`/invoice/${id}`) 
    }}
      background={background}
      cardBorder={cardBorder}
    >
     <div> Content </div>
      <Check>
        <input
          type="checkbox"
          checked={checked}
          value={checked}
          onChange={() => CheckBox}
        />
      </Check>
    </CardWrapper>
  );
}

const CardWrapper = styled.button`
  background-color: ${(props) => props.background};
  border: ${(props) => props.cardBorder};
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 347px;
  height: 129px;
  border-radius: 16px;
  color: #7f67ce;
  padding-left: 25px;
  padding-right: 25px;
  text-align: left;
  margin-top:10px;
  margin-bottom:10px;
  img {
    padding-bottom: 15px;
  }
  @media(max-width:1200px){
    width:300px;
  }
  @media(max-width:1200px){
    width:280px;
  }
  :first-child{
    margin-top:0px;
  }

`;

【问题讨论】：

标签： javascript arrays reactjs react-router styled-components

【解决方案1】：

在这里而不是 setChecked(!checked); 使用 setState 和箭头函数（以及下一个状态取决于旧状态的任何地方）setChecked((prevValue) => !prevValue)。在这里 onChange={() => CheckBox} 你需要调用箭头函数内的实际函数，如：onChange={() => CheckBox()} 或提供它的参考onChange={CheckBox}

【讨论】：

感谢回复，还是不行。我添加了一个额外的代码，只有第一张卡被选中，它不会随着点击新卡而改变。常量值 = id ？ false : true const [checked, setChecked] = useState(value);

【解决方案2】：

您希望您的数据在应用程序中保持不变，因此您需要使用以下之一：

反应上下文 API
Redux
保存到本地存储/会话存储，然后在 useEffect 上，首先渲染以使用保存的数据初始化您的数据

【讨论】：