时间戳

首页 > 解决方案 > 使用样式化组件根据值设置输入样式

reactjs - 使用样式化组件根据值设置输入样式

问题描述

我正在使用styled-components设置React Bootstrap Form.control 元素的样式。

我正在尝试确定是否可以根据输入是否具有值来设置输入样式。
例如，如果没有值（只是占位符），我希望输入为灰色。如果该字段有一个值，它应该是白色的。

我尝试了以下几种变体，但无济于事：

background: ${props =>
    props.value ? 'white' : `${props.theme.colors.greys.athens}`};

我也尝试过::placeholder造型。这样做的问题是它只会设置输入字段的内部占位符部分的样式，因此字段的完整背景不是正确的背景颜色。

标签： reactjsreact-bootstrapstyled-components

解决方案

您应该将输入值存储到状态中并检查它是否不为空，然后将其分配className给emptyInput类，否则将其分配给类。因此notEmptyInput，在您的 css 文件中，您应该有两个类emptyInput和notEmptyInput. 这应该是这样的：

state={
   inputValue:null
}

在 html 部分输入应如下：

<Input 
   className={this.state.inputValue?notEmptyInput:emptyInput}
   onChange={(event)=>{this.setState({inputvalue:event.target.value})}}
/>

在 css 文件中，你应该有：

.emptyInput{
   background-color:'gray'
}
.notEmptyInput{
   background-color:'white'
}

推荐阅读