这段代码应该使用 React 钩子改变边框半径。为什么不起作用？

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