反应 select 并更改 link 的样式

Question

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

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>
  );
}

因此，当我单击其中一个时，我想为其添加 'link-selected' 样式。我可以做到，但是当我点击另一个时我没有成功，第一个仍然是 'link-selected' 风格。你能帮我解决这个问题吗？

.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);
}

Answer 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();
}

Answer 2

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

.links_selected:visited { }

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

反应 select 并更改 link 的样式

React select and change the style of link

css

styles

hyperlink

reactjs