Mantine TagsInput 组件受控模式下的 onChange 回调问题解析

问题背景

Mantine 是一个流行的 React UI 组件库，其中的 TagsInput 组件用于处理标签输入场景。在最新版本 7.13.1 中，开发者发现当 TagsInput 组件在受控模式下使用时，onChange 回调函数的行为出现了异常。

问题现象

在受控模式下，当用户删除一个标签时，onChange 回调函数接收到的参数是被删除的值，而不是预期的当前标签列表的新值。这与组件的预期行为不符，也违背了 React 受控组件的常规模式。

技术分析

受控组件是 React 中的核心概念，意味着表单元素的值由 React 状态控制，而不是由 DOM 管理。对于 TagsInput 这样的组件，其理想行为应该是：

1. 当用户操作（添加/删除标签）发生时
2. 触发 onChange 回调
3. 回调参数应为操作后的完整标签列表
4. 父组件使用这个新值更新状态
5. 组件重新渲染显示新状态

但在 7.13.1 版本中，删除操作时回调传递的是被删除的单个标签值，这会导致：

• 父组件无法直接获取当前完整的标签列表
• 开发者需要额外逻辑来维护状态
• 与 React 受控组件的常规模式不一致

解决方案

Mantine 团队在 7.13.2 版本中修复了这个问题。修复后的行为符合预期：

• 添加标签时，onChange 接收包含新标签的完整列表
• 删除标签时，onChange 接收删除后的剩余标签列表
• 与 React 受控组件的标准行为保持一致

最佳实践

使用受控模式的 TagsInput 时，建议：

1. 始终使用最新版本的 Mantine
2. 确保 onChange 处理函数正确更新状态
3. 避免在回调中直接操作 DOM
4. 遵循单向数据流原则

总结

这个问题的修复体现了 Mantine 团队对 API 一致性的重视。受控组件的行为一致性对于开发者体验至关重要，特别是在处理表单输入这类常见场景时。通过这次修复，TagsInput 组件的行为更加符合 React 开发者的预期，减少了使用中的认知负担。