我正在尝试制作一个系统来帮助标准化我们应用的表单输入和验证，而且我不确定如何正确处理更改事件。
我正在以下结构中设置组件，从底部开始并进行处理：
NumberInput：一个托管<input>字段，仅确保数字值，并具有允许/不允许小数，最大/最小值等的设置。这类似于type =＆＃34; number＆＃34;除了我可以让它按照我想要的方式行事。它是所有onChange事件的最初来源。并控制哪些字符可以输入等
YearInput。调用NumberInput并自动添加maxLength 4和其他特定内容。
表单字段组件。看起来像<YearinputField label="Birth Day" name="">。用于标准化错误报告，标签和表单包装器div。将<inputField组件并传递this.props.children中的实际输入。需要从子级和父级获取验证消息（父级根据外部逻辑知道字段是否无效，孩子知道一年是否有效。
表单级组件：了解业务逻辑，处理更新状态或进行存储调用等。需要能够响应输入中的值更改。我不想更改这些组件的工作方式。现在他们有一种模式，我称之为onChange={this.handleChange.bind(this, 'field-name')}，能够保持完整无缺是非常棒的。我希望我是否使用常规输入，YearInput或NumberInput来影响此组件的工作方式。
抓住我的一件事是NumberInput组件知道它无效，它如何告诉FieldInput将错误类添加到其包含的div中？我认为传递限制的父母可以通过传递函数或道具来覆盖，例如“最大值”和“最小值”。
但最重要的是，我不确定我必须为父组件设置什么样的传递来触发onChange并知道输入结束时的输入值。变化
我希望除了最顶级的组件之外的所有组件都是“哑巴”。并且不了解任何应用程序架构。是否有任何模式或例子可以帮我解决这个问题？