Как выделить пустое обязательное (*) поле ввода красной рамкой, нажав на кнопку в React?
Просто удалите COLUMN из ADD COLUMN
ALTER TABLE Employees
ADD EmployeeID numeric NOT NULL IDENTITY (1, 1)
ALTER TABLE Employees ADD CONSTRAINT
PK_Employees PRIMARY KEY CLUSTERED
(
EmployeeID
) WITH( STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
2 ответа
Вы можете создать класс CSS - скажем, .red-border и добавлять его к своему вводу всякий раз, когда их значение пусто (ваш компонент должен иметь возможность использовать этот класс className prop и передавать его в свой <input /> собственный компонент)
<InputGroup
placeholder="Enter your password...*"
name="password"
className={!this.state.password.length ? '' : 'red-border'}
value={this.state.password}
onChange={this.handleChange}
/>
Хотя лучше всего хранить подобные вещи внутри вашего компонента InputGroup, ограничивая логику вашего компонента одним файлом
class InputGroup extends React.Component {
// code
render () {
return(
// code
<input
value={this.props.value}
className={!this.state.password.length ? '' : 'red-border'}
/>
);
}
};
Одним из решений, как сказал @Saraband, является изменение имени класса вашего узла в зависимости от того, содержит ли ваше поле ввода ошибку:
<InputGroup
placeholder="Enter your password...*"
name="password"
className={this.state.password.length ? '' : 'error'}
value={this.state.password}
onChange={this.handleChange}
/>
Затем вы можете использовать его со следующим CSS, который будет показать красную рамку (например):
.error input
{
border-bottom: 1px solid #eb516d;
}
Другой способ - использовать собственный атрибут required тега input, но этот метод сложно настроить:
<input type='text' required/>