反应选择并更改链接的样式答案

【问题标题】：React select and change the style of link反应选择并更改链接的样式
【发布时间】：2021-07-18 07:49:18
【问题描述】：

我的表单中有两个按钮，我希望它们在您单击它们时改变样式。目前，它们是这样的：

import React from "react";
import { Form } from "react-bootstrap";
import { Link } from "react-router-dom";

export default function InstantQuoteForm () {
  return (
    <Form className="shadow p-3 mb-5">
      <Form.Group controlId="formGroupFrom">
        <button type="submit" className="links">
         Button1
        </button>
        <button type="submit" className="links">
          Button2
        </button>
      </Form.Group>
      
    </Form>
  );
}

因此，当我单击其中一个时，我想为其添加“链接选择”样式。我可以这样做，但是当我单击另一个时我没有成功，第一个仍然具有“链接选择”样式。你能帮我解决这个问题吗？

.links-selected {
  display: inline-block;
  background-color: var(--body-color);;
  color: var(--second-color);
  padding: 0.75rem 1rem;
  border-radius: 0;
  transition: 0.3s;
  border-bottom:  solid var(--first-color);
}

【问题讨论】：

您希望该链接将您重定向到另一条路线吗？
其实我想根据选中的链接改变一些div的内容
Link 没有名为 type=submit 的道具。也许你的意思是input 字段。
我首先使用按钮，然后将它们更改为链接。现在，它们已修复。

标签： css reactjs hyperlink styles

【解决方案1】：

首先，您可以这样做。当按钮获得焦点时，其样式会发生变化。

.links-selected:focus {
  display: inline-block;
  background-color: var(--body-color);;
  color: var(--second-color);
  padding: 0.75rem 1rem;
  border-radius: 0;
  transition: 0.3s;
  border-bottom:  solid var(--first-color);
}

另外，你可以创建一个状态来保存被点击按钮的 id：

export default function InstantQuoteForm () {
  const [clickedButtonId, setClickedButtonId] = useState("");
  return (
    <Form className="shadow p-3 mb-5">
      <Form.Group controlId="formGroupFrom">
        <button type="submit" className="links" 
         onClick={()=>setClickedButtonId("btn1")} 
         className={`${clickedButtonId === "btn1" && "links-selected"}`}>
         Button1
        </button>
        <button type="submit" className="links" 
         onClick={()=>setClickedButtonId("btn2")} 
         className={`${clickedButtonId === "btn2" && "links-selected"}`}>
         Button2
        </button>
      </Form.Group>
      
    </Form>
  );
}

另外，您需要通过将此处理程序传递给onSubmit 来防止表单提交：

const handleSubmit = (e)=>{
  e.preventDefault();
}

【讨论】：

我试过这个，但不幸的是效果不佳。它刷新了页面并返回到以前的样式。
谢谢它就像我想要的那样工作，但我做了一个不重要的改变，但我想提一下：所以我稍微改变了这部分。再次感谢

【解决方案2】：

对 CSS 很陌生，但我相信你需要一个 sudo 选择器，它看起来像这样：

.links_selected:visited { }

否则您的 CSS 将不知道何时应用此特定内容。如果我犯了错误，请随时纠正我。

【讨论】：