在react中改变样式的函数

Question

所以每当你点击按钮时，我都想制作一个动画，在js中，我可能会这样做：

var x = document.GetElementById("inputBox");
function changeToRegister(){
x.style.justify-content: flex-start;
}

但当我在react 中尝试类似的东西时

const changeToRegister = () => {
var x = document.getElementsById("inputs");
x.style.justify-content: flex-start;
}

它就是不起作用，有没有办法像我在react的第一个代码部分所做的那样？按下按钮后将调用该功能

<button type="button" class="toggle-btn" onClick={changeToRegister}>Register</button>

Answer 1

在反应中使用var x = document.GetElementById("inputBox");不是一个好的做法

相反，你可以试试这个

const [justifyContentStart,setJustifyContentStart] = useState(false);
const changeToRegister = () => {
setJustifyContentStart(true)
}
<button 
type="button" 
class="toggle-btn" 
onClick={changeToRegister} 
style={ justifyContentStart ? { justifyContent:'flex-start'} : null } 
>Register</button>

使用状态变量来决定是否应用特定样式的

最初，该状态变量设置为false，因此样式不应用

一旦用户点击按钮，状态变量将设置为true，您想要的样式可以应用