Реакция проверки формы при вложении пользовательского компонента ввода - PullRequest
Новая
       6

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

0 голосов
/ 16 ноября 2018

Учитывая приведенную ниже форму, я добавил несколько пользовательских компонентов ввода, которые обрабатывают свою собственную проверку индивидуально.Однако этот подход оставил мне необходимость в способе обнародовать эти ошибки валидации для родительского компонента формы.Каков наилучший, если какой-либо подход к достижению этого?

форма: 

  <form onSubmit={this.handleFormSubmit}>
    <Input
      label={true}
      type='email'
      name='email'
      placeholder='enter email'
      value={this.email}
      handleUpdateInput={this.onUpdateInput}/>
    <button type='submit'>Submit</button>
  </form>

Ввод: 

validate = () => {
    ...validate
}

render() {
    const {label, name, type, placeholder, value, handleUpdateInput, required} = this.props
    let invalidStyle = !this.isValidated ? 'invalid' : null

    return (
      <label>
        {label && <p>{name}</p>}
        <input
          className={invalidStyle}
          type={type}
          name={name}
          placeholder={placeholder}
          value={value}
          onChange={handleUpdateInput}
          onBlur={this.validate}
          required={required}
          autoComplete="new-password"/>
      </label>
    )
  }

вопрос: каков наилучший подход для наложения недействительного подпорки на родительский компонент, содержащий форму, без переопределения того же параметра из другого входа, также размещенного в родительском компоненте?

ex:этот ввод недопустим, поэтому this.props.updateInvalid (true) добавляет недопустимый параметр в родительский компонент, но затем другой Input возвращает this.props.updateInvalid (false), сбрасывая проверку формы.Как мне избежать этого?

Как всегда, мы ценим любые направления, поэтому спасибо заранее!

...