Как выделить пустое обязательное (*) поле ввода красной рамкой, нажав на кнопку в React?

Question

На снимке экрана ниже я делаю поля обязательными, поэтому нажимаю кнопку регистрации. Если какие-либо поля, то это пустое поле я хочу выделить красной рамкой в ​​React. Как это возможно? (https://blueprintjs.com/docs/#core/components/text-inputs)

constructor(props) {
    super(props);
    this.state = {
        firstName: '',
        lastName: '',
        email: '',
        password: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.registerForm = this.registerForm.bind(this);
}

handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
}

registerForm(){
    if(this.state.firstName.trim() && this.state.lastName.trim() && 
       this.state.email && this.state.password){
         console.log("registration successfully..!!"); 
    }else{
         console.log("all * marked fields mandatory");
    }
}

render() {
  return (
    <div>
      <h2>Fill Registration Details..!!</h2>
        <InputGroup placeholder="Enter First Name...*"            
          name="firstName" value={this.state.firstName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter Last Name...*" name="lastName" 
         value={this.state.lastName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your email...*" name="email"
         value={this.state.email} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your password...*"name="password" 
         value={this.state.password} onChange={this.handleChange}/>

        <Button intent="Primary" onClick={this.registerForm}>Register</Button>
       </div>
    )
  }

Answer 1

Одним из решений, как сказал @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/>

https://www.w3schools.com/tags/att_input_required.asp

Answer 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'}
        />
    );
  }
};