выберите только одну карту reactjs

#javascript #reactjs

Вопрос:

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

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

export default function App() {
  return (
    <div className="App">
      <div className="card"></div>
      <div className="card cardSelect">
        <div className="select">select</div>
      </div>
      <div className="card"></div>
    </div>
  );
}


.card {
  width: 5rem;
  height: 5rem;
  background: red;
  margin: 1rem;
}
.cardSelect {
  box-shadow: 2px 4px 30px 0px rgba(0, 0, 0, 0.75);
}

1. Пожалуйста, добавьте логику в свой компонент и покажите проблему с вашим кодом. SO не должен быть форумом для публикации вакансий: D

2. @JulianKleine Я не добавил логику, так как я не знаю, как это сделать, я добавил простой код, так как я не могу поместить свой рабочий код, поэтому есть только 3 простые карты без чего-то сложного

Ответ №1:

Вы можете добиться этого с помощью orchestrator или родительского компонента. Я создал для вас более простой пример в code sandbox

Активная карта должна управляться из более высокого экземпляра. В данном случае это сам компонент приложения. Но вы можете создать компонент Cards и Card для его инкапсуляции. например

 <Cards>
   <Card />
   <Card />
   <Card />
</Cards>

Вот код примера в code sandbox:

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

const cardStyle = {
  width: "5rem",
  height: "5rem",
  background: "red",
  margin: "1rem"
};

const cardSelect = {
  boxShadow: "2px 4px 30px 0px rgba(0, 0, 0, 0.75)"
};

export default function App() {
  const [selected, setSelected] = React.useState(0);

  return (
    <div className="App">
      <div
        style={{ ...cardStyle, ...(selected === 0 amp;amp; cardSelect) }}
        onClick={() => setSelected(0)}
      >
        {selected === 0 amp;amp; <div className="select">select</div>}
      </div>

      <div
        style={{ ...cardStyle, ...(selected === 1 amp;amp; cardSelect) }}
        onClick={() => setSelected(1)}
      >
        {selected === 1 amp;amp; <div className="select">select</div>}
      </div>

      <div
        style={{ ...cardStyle, ...(selected === 2 amp;amp; cardSelect) }}
        onClick={() => setSelected(2)}
      >
        {selected === 2 amp;amp; <div className="select">select</div>}
      </div>
    </div>
  );
}

Ответ №2:

Что вам нужно сделать, так это

Добавьте состояние в выбор уровня приложения где-нибудь, например. `const [selection, setSelection] = useState(‘card-0’)
Создайте компонент для карт, например
Визуализируйте этот компонент три раза <CardComponent IsSelected={selection === ‘card-2’} />`
Внутри Cardcomponent добавьте этот класс, только если он выбран. className={"card " prop.isSelected ? "cardSelect" : ""}