Стилизация границы ввода для первого фокуса с использованием стилизованных компонентов

Question

У меня есть вход, стилизованный под styled components.У него есть номера min и max, и он передается как реквизит, чтобы дать красную рамку:

export const StyledInput = styled.input`
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
  }
  display: block;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  -webkit-appearance: none;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  border: ${(props) => (props.option === true ? '0px' : '')};
  line-height: 30px;
  /* vertical-align: middle; */
  z-index: 1;
  height: 33px;
  width: ${(props) => (props.numberInputWidth)};
  padding: 0 8px;
  margin-left: 5px;
  margin-top: 20px;
  transition: border-color 0.3s ease-in-out;

  &:focus {
    border-color: ${COLORS.LIGHTGREEN};
    transition: border-color 0.3s ease-in-out;

    ${({ error }) => error && `
      border-color: ${COLORS.ERROR};
    `}
  }
`

И мойсостояние компонента:

this.state = {
  inputTouched: false,
  inputValue: 0,
}

и пропеллер обработки ошибок:

error={!!(inputValue > max || inputValue < min)}

Так скажем min = 1 и max = 100.Он работает так, как задумано:

Таким образом, когда this.state.inputValue превышает минимальное / максимальное значение, появляется красная граница, указывающая на ошибку.Однако после рендеринга страницы ввод устанавливается на 0, и нажатие на него даст красную рамку.

Сначала я хочу, чтобы он был зеленым, а затем пусть логика ошибок справится с этим.Я хочу, чтобы это выглядело так:

, но только при первоначальном щелчке

Есть ли еще способ сделать это?

Answer 1

По сути, вы хотите применять только стили проверки ошибок / css ПОСЛЕ ТОГО, КАК форма сфокусирована пользователем.

Случаи, которые вы хотите обработать:

• Начальная загрузка страницы (без проверки ошибок, зеленый стиль, 0 мест)
• InputWasFocused (проверка ошибок, красный, если места недействительны)

Я не думаю, что UX очень хорошесли вход изначально зеленый, а отображается 0. Я бы лично оставил его белым и только показал, что он зеленый, ПОСЛЕ того, как было введено правильное значение, но это на ваше усмотрение.

В вашем состоянии:

this.state = {
  inputTouched: false,
  inputValue: 0,
  inputWasFocused: false
}

Ваша обработка ошибок должна быть обновлена, чтобы проверять только ошибки. ПОСЛЕ того, как ввод был сфокусирован пользователем.

if(inputWasFocused) {
  error={!!(inputValue > max || inputValue < min)}
}

Может быть реализована альтернативная логика, позволяющая просто использовать значение по умолчанию0, чтобы быть приемлемым входом, пока вход не был сфокусирован - однако я думаю, что вышеупомянутое также довольно ясно.

Затем, единственное, что вам нужно сделать, это установить состояние inputWasFocused как trueпосле того, как пользователь не сфокусировал ввод.

Добавьте обработчик к классу, в котором есть поле ввода / компонент ввода:

seatInputBlurHandler = () => {
  this.setState({inputWasFocused: true})
}

И передайте обработчик в поле ввода, чтобыбыть выполнена onBlur Для этого добавьте следующее событие в поле ввода JSX:

<input type="text" onBlur={() => this.seatInputBlurHandler()}>

---

Итак, после всего этого: при загрузке страницы inputWasFocused имеет значение false, и проверка ошибок выполняетсяне применять.Когда пользователь выбирает ввод, ничего не происходит до тех пор, пока он не уйдет - и когда он это сделает, будет запущен onBlur и выполнено seatInputBlurHandler, в результате чего для inputWasFocused будет установлено значение true, и, таким образом, будет запущена логика проверки ошибок, и поле должно бытьсоответственно стилизовано после.

Если вам нужна помощь с синтаксисом JSX, пожалуйста, опубликуйте код JSX, где вы отображаете поле ввода.