反應 select 並更改鏈接的樣式

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

因此，當我單擊其中一個時，我想為其添加“鏈接選擇”樣式。 我可以這樣做，但是當我單擊另一個時我沒有成功，第一個仍然具有“鏈接選擇”樣式。 你能幫我解決這個問題嗎？

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

此外，您可以創建 state 以保留單擊按鈕的 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 將不知道何時應用這個特定的東西。 如果我犯了錯誤，請隨時糾正我。