Javascript ReactJS：如何创建自验证输入字段？

我有一个表单，其中一个字段需要非常具体的验证。我希望能够在其他表单中重用此字段，而无需表单一次又一次地重新实现验证方法

我认为将输入字段提取到它自己的组件，

DomainInput

会起作用：

<div id="domain-input-area" class={this.state.showDomain ? '' : 'base-remove'}>
     <DomainInput/>
</div>

我的想法是，当

domainput

知道它的状态是有效的时，它会向父组件（表单）触发一个事件，让它知道它已经过验证

但我意识到，由于单向数据流，这不是反应方式，相反，

onChange

处理程序应该在父级中实现，正如我所说，我不想这样做，因为我希望能够以任何形式删除

domainput

，并让它自己验证

其他框架，如允许子组件向父组件发送自定义事件。在我的例子中，它将发送一个

validated

事件，这将反过来将父级的状态设置为

validDomain:true

---

如何以react方式执行此操作？

为了让您了解如何处理父级（管理状态）和子级（自定义输入字段），下面是示例代码：

TextField.jsx

export const TextField = ({error, ...rest}) => {
  return (
    <div className="mb-6">
      <label htmlFor={rest.name} className="">
        {rest.label}
      </label>
      <input
        type="text"
        {...rest}
        className={ '' + (!!error ? ' border-red' : '')}
      />
      {error && <div className="...">{error}</div>}
    </div>
  )
}

 this.state = { email: '', error: '' }

 <TextField
        label="Email Address"
        name="email"
        value={this.state.email}
        placeholder="doge@example.com"
        onChange={handleChange}
        onBlur={handleBlur}
        error={state.error}
      />

---

但这不正是我想要避免的吗？handleChange在父组件中实现。如果我想跨多个表单重用DomainInput，如何直接在DomainInput内部进行验证？否则，每个表单都必须实现一个处理程序并将其传递给DomainInput。如果要用于多个位置，则可以创建在onBlur或onChange内部调用的通用验证器。我在此再次建议，您应该检查Formik—强烈推荐的用于验证表单的库。

 this.state = { email: '', error: '' }

 <TextField
        label="Email Address"
        name="email"
        value={this.state.email}
        placeholder="doge@example.com"
        onChange={handleChange}
        onBlur={handleBlur}
        error={state.error}
      />

handleChange = (event) => {
    let { name, value } = event.target
    // set state here and also validate
}

handleBlur = (event) => {
  let { name, value } = event.target
  // set state here and also validate
}