此代码应使用 React 挂钩更改 border-radius。为什么它不起作用？

Question

我刚开始使用 React 钩子，我正在尝试制作一个形状转换按钮，当您单击它时，它会从方形变为圆形，然后再变为圆形。我想通过改变border-radius来达到效果 CSS 属性但是好像不行！

我很困惑，因为使用类似的代码我可以改变颜色...请帮助我！

function ShapeChangerButton(){
  const [radius, setRadius] = useState("0px");
    
  function changeShape(){
    if(radius === "0px"){
      setRadius(radius => "30px");
    }
    else{
      setRadius(radius => "0px");
    }    
  }
  
  return(
    <div>
      <button className="standardBtn"
              style={{border-radius: radius}}
              onClick={changeShape}>change shape</button>      
    </div>
  )
}

Answer 1

样式配置应为：

style={{ borderRadius: radius }}

或

function ShapeChangerButton() {
  const [radius, setRadius] = useState("0px");

  function changeShape() {
    if (radius === "0px") {
      setRadius((radius) => "30px");
    } else {
      setRadius((radius) => "0px");
    }
  }

  return (
    <div>
      <button
        className="standardBtn"
        style={{ borderRadius: radius }}
        onClick={changeShape}
      >
        change shape
      </button>
    </div>
  );
}

此代码应使用 React 挂钩更改 border-radius。为什么它不起作用？

This code should change the border-radius with React hooks. Why doesn't it work?

css

button

react-hooks