Добавление множественной проверки в компонент реагирования

Question

Я использую один компонент реакции учебника, где проверка запекается в компоненте.У меня проблема, я могу сделать только один тип проверки, но я хочу сделать несколько проверок.

Рендеринг моего компонента

    <Input
          hintText={this.props.hinttext}
          placeholder={this.props.placeholder}
          value={this.state.value}
          onChange={this.onChange}
        />

И метод onChange это

  onChange = (evt) => {
    const name= this.props.name;
    const value = evt.target.value;
    const error = this.props.validate ? this.props.validate(value) : false;
    this.setState({value, error});
    this.props.onChange({name, value, error});
  }

Теперь я использую это в своей форме со следующими методами

          <Field
            placeholder="Email"
            name='email'
            value={this.state.fields.email}
            onChange={this.onInputChange}
            validate={(val) => (isEmail(val) ? false: 'Invalid Email')}
          />

Это выполнит проверку электронной почты, в то время как если мне понадобится другой тип проверки, я могу изменить проверку, например, следующим образом

            validate={(val) => (val ? false : 'Name Required')}

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

Answer 1

Вы можете попробовать запустить собственный валидатор с нужной вам валидацией, как показано ниже

function validator(val) {
  this.error = [];
  this.val = val;
  this.isRequired = function(){
    if (!this.val) {
      this.error.push('This field is required');
    }
    return this;
  }
  this.isEmail = function() {
   const filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   if (this.val && !filter.test(this.val)) {
      this.error.push('Invalid Email');
   }
   return this;
  }
  return this;
}

и вызовите валидатор в атрибутах проверки

<Field
    placeholder="Email"
    name='email'
    value={this.state.fields.email}
    onChange={this.onInputChange}
    validate={(val) => new validator(val).isRequired().isEmail().error}
/>