在 reactJs 中动态和有条件地更改按钮的 css

【问题标题】：Dynamically and conditionaly changing css of a button in reactJs在 reactJs 中动态和有条件地更改按钮的 css
【发布时间】：2020-04-16 22:38:03
【问题描述】：

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

【问题讨论】：

【解决方案1】：

你可以这样做

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

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

<button className={this.state.error && 'error'}>Save</button>

希望对你有帮助

PS this.state.error 假设您使用的是类组件

【讨论】：

【解决方案2】：

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

<button className={ this.state.something ? 'first-class' : 'second-class' }>Clicker</button>

如果你想有条件地添加一个类名属性，那么

<button { ...(booleanValue && { className: 'some-class' }) }>Clicker</button>

【讨论】：