Нажатие на шаги в компоненте временной шкалы в реакции должно быть установлено как активное и изменить цвет временной шкалы.

Question

здесь вы можете проверить

https://codesandbox.io/s/timeline-component-r5ftj

Код реагирования

В этой программе я просто хочу добавить, когда я go к шагам 1 или шаг 2, или нажмите, чтобы временная шкала была цветной.

пример: -

когда я нажимаю на временной шкале шага 3, цвет должен переходить к шагу 3 или когда я нажимаю на шагу 1, поэтому только первый шаг быть цветным.

здесь я создал один массив и сопоставил этот массив с элементами.

import React from "react";
import "./styles.css";

export default function App() {
  const items=[{
    name: 'Step 1',
    active: true,
  },
  {
    name: 'Step 2',
    active: true,
  },
  {
    name: 'Step 3',
    active: false,
  },
  {
    name: 'Step 4',
    active: false,
  },];
    const totalItems = items.length;
    const numberOfActiveItems = items.filter(item => item.active).length;
    const progressBarWidth = totalItems > 1 ? (numberOfActiveItems - 1) / (totalItems - 1) * 100 : 0;
 function click(e){


 }

  return (
  <div>

   <div className="timeline">
     <div className="timeline-progress"  style={{ width: `${progressBarWidth}%`}}></div>
     <div className="timeline-items">

      {items.map((item,i)=>(
        <div key={i} className={"timeline-item" + (item.active ? ' active' : '')}>
          <div className="timeline-contain" onClick={()=>click()}>
              {item.name}

                    </div>
        </div>
      ))}

     </div>
   </div>
   </div>
  );
}

css код

здесь css код

.App {
  font-family: sans-serif;
  text-align: center;
}
.timeline {
  margin: 250px 60px;
  height: 5px;
  background-color: #ccc;

}

.timeline-progress {
  width: 33%;
  height: 100%;
  background-color: red;
}
.timeline-items {
  margin-left: -5px;
  margin-right: -5px;
  margin-top: -12px;
  display: flex;
  justify-content: space-between;
}

.timeline-item {
  position: relative;
}
.timeline-item::before {
  content: " ";
  width: 20px;
  height: 20px;
  background-color: #ccc;
  display: block;
  border-radius: 100%;
}
.timeline-contain {
  position: absolute;
  top: -37px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ddd;
  width: 100px;
  padding: 5px 10px;
  border-radius: 15px;
  text-align: center;
}

.timeline-contain::before {
  content: " ";
  width: 10px;
  height: 10px;
  background-color: #ddd;
  display: block;
  position: absolute;
  top: 18px;
  margin-left: -2px;
  left: 50%;
  transform: rotate(-45deg) translateX(-50%);
}
.timeline-item.active::before {
  background-color: red;
}
.timeline-item.active .timeline-contain {
  color: #fff;
  background-color: red;
}
.timeline-item.active .timeline-contain::before {
  background-color: red;
}

Answer 1

Я думаю, что вы не использовали состояние для ловушки для повторного рендеринга при любых изменениях. Надеюсь, приведенный ниже код поможет

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  // added state called item and update state function
  const [item, setItems] = useState(items);

  const totalItems = items.length;

  // for progressbar changes
  const numberOfActiveItems = item.filter(o => o.active).length;
  const progressBarWidth =
    totalItems > 1 && numberOfActiveItems > 0  ? ((numberOfActiveItems - 1) / (totalItems - 1)) * 100 : 0;

  // on click handler changes state 
  const click = index => {
    const items = item;
    items.forEach((item, i) => {
      if (i <= index) {
        item.active = true;
      } else {
        item.active = false;
      }
    });
    setItems([...item], [...items]);
  };


  return (
    <div>
      <div className="timeline">
        <div
          className="timeline-progress"
          style={{ width: `${progressBarWidth}%` }}
        />
        <div className="timeline-items">
          {item.map((item, i) => (
            <div
              key={i}
              className={"timeline-item" + (item.active ? " active" : "")}
              onClick={() => click(i)}
            >
              <div className="timeline-contain">{item.name}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const items = [
  {
    name: "Step 1",
    active: false
  },
  {
    name: "Step 2",
    active: false
  },
  {
    name: "Step 3",
    active: false
  },
  {
    name: "Step 4",
    active: false
  }
];