input change事件触发问题

[duansheli]

问题描述

input 事件触发问题

blur 正常 修改时change 不会触发， 修改后失去焦点change会被触发

环境依赖

"vue": "^3.0.11",

"devDependencies": { "@vitejs/plugin-vue": "^1.2.2", "@vitejs/plugin-vue-jsx": "^1.1.4", "@vue/compiler-sfc": "^3.0.11", "vite": "^2.3.3" }

相关代码

Test3Bad.vue

<script lang="tsx">
import { defineComponent, ref } from "vue";
const sname = ref("good");
function onchange(a) {
  console.log("onchange-", a);
}
function onblur(a) {
  console.log("onblur-", a);
}
export default defineComponent({
  setup() {
    const sname = ref("bad2");

    return () => (
      <>
      <input type="text" value={sname.value} 
          onChange={()=>onchange(sname.value)} 
          onBlur={()=>onblur(sname.value)} 
           /> 
      </>
    );
  },
});
</script>

[haoqunjiang]

跟 JSX 或者 Vue 都没有关系。 原生 DOM 事件就是这样处理的。 参见 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event#text_input_element