Question

考虑到下面列出的表单，我添加了一些自定义的Input组件，分别处理自己的验证。但是，这种方法使我需要一种方法来将那些验证失败泡到父表单组件上。有什么办法做到这一点最好？

表格：

  <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）以重置表单检查。如何避免这种情况？

一如既往地感谢所有方向，所以在此先感谢！

嵌套自定义输入组件时进行表单验证

0 个答案: