Блог

Я пытаюсь использовать перехваты для изменения состояния реакции onClick. Я использовал .map, чтобы составить список «карточек» с разными реквизитами, и я хочу превратить это в форму, в которой я могу щелкнуть по 1 из карточек, и граница / css изменится, и карта будет выбрана.

Я не уверен, должен ли я поместить хук для этого на страницу и передать компоненту или поместить его непосредственно в компонент. (прямо сейчас у меня есть select на странице и style в компоненте, но он не работает)

Пока я могу изменить цвет по щелчку, но если я нажму на другую карту, она не изменит другую обратно. У меня есть несколько страниц, на которых я должен сделать что-то похожее на это, поэтому любые советы приветствуются!

Вот код для страницы:

 const LemmeUpgradeYa = () => {
    const [path, setPath] = useState('/');

    const cardSelector = () => {
        // setPath('/${plans.plan}');
        console.log(AllPlans.AllPlans);
    };

    useEffect(() => {
        cardSelector();
    });

    return (
        <React.Fragment>
            <Card>
                <style>
                    @import url('https://fonts.googleapis.com/css2?family=Martel Sans:wght@300amp;display=swap');
                </style>
                <CardBody className="big-card-plan">
                    <h1 className="plan-title-one">Upgrade Plan</h1>
                    <Form>
                        {AllPlans.AllPlans.map((planItem) => (
                            <Cards onClick={cardSelector} key={planItem} {...planItem} />
                        ))}
                        <a href={path}>Continue</a>
                    </Form>
                </CardBody>
            </Card>
        </React.Fragment>
    );
};

export default LemmeUpgradeYa;
 

вот код для componenet:

 const Cards = (plans) => {
    const [border, setBorder] = useState('profile-box-one');

    const cardSelector = () => {
        setBorder('profile-box-two');
        setPath('/${plans.plan}');
    };

    const selectChange = () => {
        setBorder('profile-box-one');
    };

    useEffect(() => {
        selectChange();
    }, []);

    return (
        <React.Fragment>
            <Card className={border} onClick={cardSelector} onChange={selectChange}>
                <Row>
                    <Col className="float-left max-width-plan">
                        <div className="plan-selector">Current Plan:</div>
                        <div className="center-text plan-font">{plans.plan}</div>
                    </Col>
                    <Col className="float-right padding-plan-top">
                        <Row>
                            <Col className="max-plan-width">
                                <p className="plan-description">{plans.description}</p>
                            </Col>
                            <Col>
                                <div className="plan-price">${plans.price} / month</div>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Card>
        </React.Fragment>
    );
};

export default Cards;
 

Общий подход заключается в том, чтобы иметь состояние, в Parent котором содержится выбранный дочерний идентификатор, вы передаете каждому Child текущему выбранному и функции для выбора. В дочернем элементе вы можете сравнить, был ли он выбран для выбора правильного класса CSS.

obs: у Cards вас есть имя props as plans . хотя вы можете называть, как хотите, стандартно придерживаться соглашения и называть его as props .

ниже показано, как вы можете решить проблему, связанную с вашим кодом:

 const LemmeUpgradeYa = () => {
    const [pickedCard, setPickedCard] = useState(null);

    return (
        <React.Fragment>
            <Card>
                <style>
                    @import url('https://fonts.googleapis.com/css2?family=Martel Sans:wght@300amp;display=swap');
                </style>
                <CardBody className="big-card-plan">
                    <h1 className="plan-title-one">Upgrade Plan</h1>
                    <Form>
                        {AllPlans.AllPlans.map((planItem) => (
                            <Cards pickedCard={pickedCard} setPickedCard={setPickedCard} key={planItem} plans={...planItem} />
                        ))}
                        <a href={path}>Continue</a>
                    </Form>
                </CardBody>
            </Card>
        </React.Fragment>
    );
};

export default LemmeUpgradeYa;


const Cards = ({ plans, pickedCard, setPickedCard }) => {

  const cardSelector = () => {
    setPickedCard(plans.plan);
      setPath('/${plans.plan}');
  };

  const selectChange = () => {
    setPickedCard(null);
  };

  return (
      <React.Fragment>
          <Card className={`profile-box-${pickedCard ? 'two' : 'one' }`} onClick={cardSelector} onChange={selectChange}>
              <Row>
                  <Col className="float-left max-width-plan">
                      <div className="plan-selector">Current Plan:</div>
                      <div className="center-text plan-font">{plans.plan}</div>
                  </Col>
                  <Col className="float-right padding-plan-top">
                      <Row>
                          <Col className="max-plan-width">
                              <p className="plan-description">{plans.description}</p>
                          </Col>
                          <Col>
                              <div className="plan-price">${plans.price} / month</div>
                          </Col>
                      </Row>
                  </Col>
              </Row>
          </Card>
      </React.Fragment>
  );
};

export default Cards;