Стилизация границы ввода при первом фокусе с использованием стилизованных компонентов
У меня есть вход в стиле 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, и щелчок по нему даст красную рамку.
Сначала я хочу, чтобы он был зеленым, а затем позволил логике ошибок обработать его.
Я хочу, чтобы это выглядело так: 
но только при первом нажатии
Есть ли способ это сделать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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})
}
И передайте обработчик в поле ввода, чтобы он выполнялся на Blur. Для этого добавьте в поле ввода JSX следующее событие:
<input type = "text" onBlur = {() => this.seatInputBlurHandler()}>
Итак, после всего этого: Когда страница загружается, inputWasFocused имеет значение false, и проверка ошибок не применяется. Когда пользователь выбирает ввод, ничего не происходит, пока они не уйдут - и когда они это сделают, запускается onBlur и выполняется seatInputBlurHandler, в результате чего inputWasFocused устанавливается в значение true, и, таким образом, запускается логика проверки ошибок, и поле должно быть оформлен соответствующим образом после.
Если вам нужна помощь с синтаксисом JSX, опубликуйте код JSX там, где вы визуализируете поле ввода.