vue jsx 構文でネイティブ イベントを追加する方法

vue jsx 構文でネイティブ イベントを追加する方法

問題の説明

vue-jsx シンタックスにクリックイベント(シンタックス: v-on:click)を追加すると自動で実行されますが、何がいけなかったのかわかりません。

問題の原因

クリック イベント (構文: v-on:click) は、現在の jsx レンダリング関数で複数回レンダリングされ、複数の自動実行が発生します。

問題が解決しました

ネイティブ クリック イベントを追加する

公式文法

render (h) {
    
    
  return (
    <div
      // normal attributes or prefix with on props.
      id="foo"
      propsOnCustomEvent={
    
    this.customEventHandler}
      // DOM properties are prefixed with `domProps`
      domPropsInnerHTML="bar"
      // event listeners are prefixed with `on` or `nativeOn`
      onClick={
    
    this.clickHandler}
      nativeOnClick={
    
    this.nativeClickHandler}
      // other special top-level properties
      class={
    
    {
    
     foo: true, bar: false }}
      style={
    
    {
    
     color: 'red', fontSize: '14px' }}
      key="key"
      ref="ref"
      // assign the `ref` is used on elements/components with v-for
      refInFor
      slot="slot">
    </div>
  )
}

知らせ

パラメータはイベントの背後に持ち越すことはできません

onClick={
    
    this.clickHandler(params)} //经测试后，点击事件不生效
nativeOnClick={
    
    this.nativeClickHandler(params)} //经测试后，点击事件不生效

その他の vue-jsx 構文については、babel-plugin-transform-vue-jsx を確認してください

githubのリンクに飛びます