在地图功能中，我想设置一个状态，让我在单击 div 时更改背景颜色

Question

所以这是我的问题，我映射从后面收到的一些数据，它返回一组 div，我希望能够单击一个 div，更改他的颜色背景并将其用于总价（它们是您可以选择的选项）选择）。

我试图设置一个“已单击”状态，该状态在单击时设置为 true，但该状态位于所有元素上，而不是我刚刚单击的唯一元素。如果我的状态为真，我会更改背景颜色并将其添加到总价中（在模式中详细计算）

 <p className="title-config">Configuration</p>
        {data &&
          data.additionalCharges.map((charges, index) => {
            // console.log("charges.map", charges);
            return (
              <div
                className={
                  clicked === true ? "clicked-config" : "unclicked-config"
                }
                key={index}
                onClick={() => setClicked(true)}
              >
                <p>{charges.title}</p>
                <p>{charges.description}</p>
                <p>
                  {charges.price.amount} {location.state.price.currency}
                </p>
              </div>
            );
          })}
      </div>
      <div className="colonne2-config">
        <div>
          <span> Total {location.state.total}</span>
          <span>{location.state.price.amount}</span>
        </div>

        <div>
          <div onClick={() => setShowModal(true)}>Voir les details du prix</div>
          <Modal
            isOpen={showModal}
            onRequestClose={() => setShowModal(false)}
            style={{
              overlay: {
                backgroundColor: "lightgrey",
                backgroundOpacity: "50%",
              },
            }}
          >
            <h1>Details du prix</h1>
            <button onClick={() => setShowModal(false)}> X </button>
          </Modal>
        </div>

Answer 1

这是实现预期目标的工作示例：

代码片段

const {useState} = React;

const SomeComponent = ({data, ...props}) => {
  // the clicked is being used to achieve two goals
  // 1. track which item is clicked (ie, selected)
  // 2. update the total-price by adding / subtracting the clicked item's price
  // NOTE: This is not a good approach to employ in general. Please avoid.
  // Instead, use a separate variable to calculate the total-price.
  const [clicked, setClicked] = useState({total: 0});
  const getClass = idx => (`item ${clicked[idx] ? 'selected' : 'unselected'}`);

  return (
    <div>
      <h4>List of Items</h4>
      {
        data && Array.isArray(data) && data.map(
          ({title, description, amount}, idx) => (
            <div
              key={idx}
              onClick={() => setClicked(prev => ({
                ...prev,
                total: (
                  prev[idx] ? prev.total - +amount : prev.total + +amount
                ),
                [idx]: !prev[idx]
              }))}
              class={getClass(idx)}
            >
              {title}   {description}   {amount}
            </div>
          )
        )
      }
      <br/>
      Total Price: {clicked.total}
    </div>
  );
};

const rawData = [
  {title: 'Title 00', description: 'Description 00', amount: '100'},
  {title: 'Title 01', description: 'Description 01', amount: '110'},
  {title: 'Title 02', description: 'Description 02', amount: '120'},
  {title: 'Title 03', description: 'Description 03', amount: '130'},
  {title: 'Title 04', description: 'Description 04', amount: '140'},
  {title: 'Title 05', description: 'Description 05', amount: '150'},
  {title: 'Title 06', description: 'Description 06', amount: '160'}
];

ReactDOM.render(
  <div>
    <h2>DEMO</h2>
    <SomeComponent data={rawData}/>
  </div>,
  document.getElementById('reactdiv')
);

.item {
  border: 2px solid black;
  margin-bottom: 10px;
  padding: 2px 15px;
  cursor: default;
  width: fit-content;
}

.unselected { background-color: #EEEEFF; }
.selected { background-color: #6666AA; color: white}

<div id='reactdiv'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

解释

• clicked 需要是一个数据结构，可以跟踪哪些渲染的项目被点击（即选择），哪些没有。
• 在此代码段中，它被设置为一个对象
• 为了演示的简单性，相同的clicked对象具有保存总价格的次要目的。
• 当用户点击任何项目时，它的背景颜色会发生变化（使用getClass方法）
• 并且该项目的价格会添加到total中或从total中删除

总体而言 - 这是一个相当简单、直接的代码片段。

Answer 2

根据我对这个问题的理解，您可以做的是，添加另一个名为 divIndex 的状态并将条件更改为 clicked && divIndex === index 或者您可以只删除单击状态并仅使用 divIndex 状态，就像 divIndex === index 一样。

Answer 3

所以我找到了某种解决方案，但它并不完美，在我的 newOption 中，它不会删除我有时单击的元素...不过，在选项卡中添加一个元素是完美的...

这就是我所做的。

 const [selectedOption, setSelectedOption] = useState([]);
  const [isSelected, setIsSelected] = useState(false);

const handleConfigClick = (charges, index) => {
    const newOption = [...selectedOption];
    // Est-ce que l'option est déjà présente  ?
    // console.log("index", index);
    const exist = newOption.find((elem) => elem.id === charges.id);
    // console.log("L'élément trouvé ====> ", exist);
    if (exist) {
      newOption.splice(index, 1);
      setIsSelected(false);
      console.log("exist");
    } else {
      console.log("existe pas");
      setIsSelected(true);
      newOption.push(charges);
    }
    console.log("newoption", newOption);
    setSelectedOption(newOption);
  };

它可能不是最佳的，但它接近我的结果，只需要解决该选项在单击时不离开选项卡的情况