Question

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

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

我已经尝试了以下几种方法，但无济于事：

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

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

Answer 1

您应确保对此值有一个状态，并且在父包装中，应访问此状态以使该父具有正确的背景色。

Answer 2

您应该将输入值存储到状态中，并检查它是否不为null，然后将其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'
}

Answer 3

也许最好的方法是将输入状态值作为prop传递并像这样访问它：

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

Answer 4

我认为这就是您要寻找的

do

Answer 5

为该字段具有值添加了一些状态：

 const [hasValue, setHasValue] = useState(false);

  function onChangeValue(event) {
    if (onChange !== null) {
      onChange();
    }
    if (event.target.value === '' || event.target.value === undefined) {
      return setHasValue(false);
    }
    return setHasValue(true);
  }

然后更改样式以使用hasValue

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

使用样式化的组件根据值对输入进行样式化

5 个答案: