时间戳

首页 > 解决方案 > 切换边框并在反应中选择onClick

javascript - 切换边框并在反应中选择onClick

问题描述

我正在尝试使用钩子来更改 onClick 的反应状态。我使用 .map 制作了具有不同道具的“卡片”列表，我想将其制作成一个表单，我可以在其中单击其中一张卡片，边框/css 将更改并且卡片将被选中。

我不确定是否应该将这个钩子放在页面中并传递给组件或直接放在组件中。（现在我在页面中选择了组件中的样式，但它不起作用）

到目前为止，我可以在点击时改变颜色，但如果我点击另一张卡片，它不会改变另一张卡片。我有几页我必须在上面做类似的事情，所以任何建议都值得赞赏！

这是页面的代码：

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@300&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;

这是组件的代码：

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;

标签： javascriptreactjsformsdictionarysass

解决方案

常见的方法是拥有一个Parent包含所选子 ID 的状态，您将向下传递给每个Child当前选择的和要选择的函数。在 child 你可以比较它是否被选中来选择正确的 CSS 类。

obs：在Cards你命名props为plans. 尽管您可以随心所欲地命名，但遵循约定并将其称为props.

下面是您如何处理应用于您的代码的问题：

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

    return (
        <React.Fragment>
            <Card>
                <style>
                    @import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@300&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;

推荐阅读