Использование стилизованных компонентов для стилизации ввода в зависимости от значения - PullRequest
Новая
       19

Использование стилизованных компонентов для стилизации ввода в зависимости от значения

0 голосов
/ 09 марта 2020

Я использую styleled-компоненты для стиля React Bootstrap Элемент Form.control.

Я пытаюсь понять, можно ли стилизовать ввод в зависимости от того, имеет ли он значение.
Например, без значения (просто заполнитель) я бы хотел, чтобы ввод был серым. Если поле имеет значение, оно должно быть белым.

Я пробовал несколько вариантов ниже, но безрезультатно: 

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

Я также пробовал ::placeholder стиль Проблема в том, что он будет стилизовать только внутренние части заполнителя поля ввода, поэтому полный фон поля имеет неправильный цвет фона.

Ответы [ 5 ]

0 голосов
/ 09 марта 2020

Добавлено некоторое состояние, если поле имеет значение: 

 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}`};
0 голосов
/ 09 марта 2020

Я думаю, это то, что вы ищете 

import React, { useState } from "react";
import styled from "styled-components";
import { FormControl } from "react-bootstrap";

const HomeView = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <StyleFormControl
        placeholder="placeholder"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </div>
  );
};

const StyleFormControl = styled(FormControl)`
  background: ${props => (props.value ? "white" : "gray")};
`;

export default HomeView;
0 голосов
/ 09 марта 2020

Вы должны сохранить входное значение в состоянии и проверить его, если оно не равно нулю, затем присвоить его className классу emptyInput, иначе назначить его notEmptyInput class.So в вашем файле 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'
}
0 голосов
/ 09 марта 2020

Возможно, лучший способ - передать значение входного состояния в виде реквизита и получить к нему доступ следующим образом: 

background: ${props =>
props.value !== ”” ? 'white' : `$            {props.theme.colors.greys.athens}`};
0 голосов
/ 09 марта 2020

У вас обязательно должно быть состояние для этого значения, и в родительской оболочке вы должны получить доступ к этому состоянию, чтобы иметь правильный цвет фона для этого родителя.

...