[TagInput] 透传inputProps中onChange事件报错

[entireyu]

tdesign-vue-next 版本

1.10.4

重现链接

https://codesandbox.io/p/sandbox/tdesign-vue-next-tag-input-max-demo-forked-d7ljpx

重现步骤

<template>
  <t-tag-input v-model="tags" placeholder="最多只能输入 3 个标签" :max="3" :inputProps="{
    onChange: handleOnChange
  }" @enter="onEnter" />
</template>

<script setup>
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';

const tags = ref([]);
const onEnter = (value, { inputValue }) => {
  if (value.length >= 3 && inputValue) {
    MessagePlugin.warning('最多只能输入 3 个标签!');
  }
};
function handleOnChange(value){
  console.log(value)
}
</script>

期望结果

获取到输入框的输入内容

实际结果

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

20.11.1

补充说明

似乎是因为onChange属性不支持数组导致的。我需要监听用户输入的内容

[github-actions]

👋 @entireyu，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[entireyu]

如果有同样遇到此问题的同学，可以先通过设置v-model:inputValue + watch的形式替代

[entireyu]

如果有同样遇到此问题的同学，可以先通过设置v-model:inputValue + watch的形式替代
也可以使用input-change

[Wesley-0808]

@entireyu 抱歉现在才留意到这个，抽了点时间分析了一下

因为TagInput组件内部默认引入了onInnerChange作为Input的onChange，所以在TagInput的透传inputProps中再添加一个onChange就会导致他俩（两个方法）合并成数组（拓展运算符），进而导致最底层hooks报错onChange is not a function，因为他确实不是个function。

所以！正确的方法是使用onInputChange，也就是你说的办法，因为onInnerChange会调用了这个方法来返回值，把他当做Input的onChange就好了。

• 代码：
  
• 内层inputConsole：
  
• 最底层Hooks(useVModel)Console：