reactJs中的按钮的动态css动态改变

Question

在React应用程序中，当表单输入验证失败时如何动态更改按钮的CSS（有很多接受标记的输入字段）

Answer 1

您可以这样操作

<button style={{backgroundColor: this.state.error ? 'red' : 'green'}}>Save</button>

或根据这样的css文件中的错误状态和样式更改类，>

<button className={this.state.error && 'error'}>Save</button>
希望这会有所帮助

PS this.state.error假定您正在使用类组件

Answer 2

此外，您可以有条件地提供className。如果在条件为false时不想设置任何内容，则保留为空字符串''