Javascript 通过onSubmit更改React中表单的CSS样式

我正在使用react引导程序，并试图获取我的Form.Control，以便在表单提交时更改其CSS样式。当提交发生时，我可以在控制台中看到

formStyle

在两者之间变化，但是当我相信状态发生变化时，它不会用这些新样式重新呈现

任何解释都会非常有用

render（）{
常量锁定样式={
背景色：“26607d”，
颜色：“ffffff”，
};
常量解锁样式={
背景颜色：“ffffff”，
颜色：“26607d”，
};
让formStyle=lockedStyle；
常量交换=事件=>{
event.preventDefault（）；
如果（此.state.isLocked）{
formStyle=unlockedStyle；//更改为Unlocked
this.setState（{isLocked:false}）；
console.log（formStyle）；
}否则{
formStyle=lockedStyle；//更改为Locked
this.setState（{isLocked:true}）；
console.log（formStyle）；
}
返回(
交换样式
);
};

要导致重新渲染，应该有一个状态更改，但每次重新渲染时，都会在

中将formstyle设置为锁定样式，让formstyle=lockedStyle；

尝试将formStyle移动到状态变量，然后将this.state.formStyle应用到该样式，然后可以删除isLocked，只保留formStyle作为状态。只需在交换中的状态之间切换即可

看看下面的例子

但对于最佳实践，最好让render方法渲染并将所有变量移到外部，因为一旦定义了它们，就应该始终记住每次状态更改（setState）时都会出现render（）

swap=event=>{
event.preventDefault（）
this.setState（（prevState）=>{return{formStyle:（prevState.formStyle==lockedStyle？unlockedStyle:lockedStyle）}）```
}
.....
render（）{
返回(
交换样式
)
}

通过直接在FormControl中设置样式，您是否可以跳过使用可变“formstyle”

style={this.state.isLocked ? lockedStyle : unlockedStyle}

---

非常感谢。这确实有助于阐明react在渲染时的作用。

swap = event => {
       event.preventDefault()
       this.setState((prevState) => {return {formStyle:(prevState.formStyle==lockedStyle? unlockedStyle : lockedStyle)}})```

 }
 .....
 render() {
     return (
     <Form onSubmit={this.swap}>
           <Form.Control 
                type="text"
                placeholder="First Name"
                style={this.state.formstyle}
            >
            <Button type="submit">Swap Styles</Button>
 </Form>)
 }

style={this.state.isLocked ? lockedStyle : unlockedStyle}