使用纯 CSS 或动态更改焦点更改时的按钮样式，

Question

编码新手，我正在努力做到这一点，所以你点击一个按钮，它会改变那个按钮的颜色，然后当你点击它旁边的按钮时，那个按钮会改变颜色，而前一个按钮恢复到原来的颜色。按下左键后，焦点应再次转移到左键。我已经尝试了很多很多不同的东西，但这就是我现在所拥有的。

const [buttonOneOn, setButtonOneOn] = useState(false)
const [buttonTwoOn, setButtonTwoOn] = useState(false)

  function onChangeForFilter(e) {
    setButtonOneOn(prevButtonOn=>!prevButtonOn)
    if(buttonOneOn===true){
      e.target.style.color = "grey"
    }
    else{e.target.style.color='blue'}
    if(buttonTwoOn===true){
      setButtonOneOn(false)
    }
  }

  function onChangeForFilter2(e) {
    setButtonTwoOn(prevButtonOn=>!prevButtonOn)
    if(buttonTwoOn===true){
      e.target.style.color='grey'
    }
    else{e.target.style.color='blue'}
    if(buttonOneOn===true){
      setButtonOneOn(false)
    }
  }

显然，这段代码根本无法满足我的要求。在网上找不到任何答案。如果有人有任何资源，将不胜感激。

Answer 1

您完全可以在 css 中真正做到这一点。这是您可以播放的一些样本。让我知道这是否是你的意思。

button {
  background-color: white;
  border-radius: 10px;
  color: black;

}

button:focus  {
  background-color: red;
  border-radius: 10px;
  color: white;
}

<div>
  <button>My button 1</button>
  <button>My button 2</button>
  <button>My button 3</button>
</div>

Answer 2

我的方法使用状态和模板文字来处理 className

import './css.css'

export default function Buttonsso() {
    const [buttonOne, setButtonOne] = useState(false);
    const [buttonTwo, setButtonTwo] = useState(false);

    function eForBtn1() {
        setButtonOne(buttonOne=>!buttonOne);
    }

    function eForBtn2() {
        if(buttonOne === true & buttonTwo=== false) {
            setButtonOne(false);
            setButtonTwo(true);
        }
    }

  return (
    <div>
      <button className={`${buttonOne ? "purple" : ""}`} onClick={() => eForBtn1()}>btn1</button>
      <button className={`${buttonTwo ? "orange" : ""}`} onClick={() => eForBtn2()}>btn2</button>
    </div>
  )
}

css.css 文件看起来像

.purple {
    background-color: purple;
}

.orange {
    background-color: orange;
}

我没有你的渲染函数，所以无法处理你的代码。但我的解决方案肯定有效。

使用纯 CSS 或动态更改焦点更改时的按钮样式，

Change button style on focus change using pure CSS or dynamically,

javascript

css

reactjs