[bug] The dynamic element(tag) can not apply the onChange events to `on`.

[snowyu]

like this:

const Tag = this.props.long ? "textarea" : "input"

const input = <Tag 
  onChange={this.props.onChange}
  className="make-this-pretty"
  id="important-input"
/>;

[eshimischi]

<input
      v-if="type !== 'textarea'"
      onChange={this.props.onChange}
      className="make-this-pretty"
      id="important-input"
/>

[snowyu]

I know you can use dynamic attribute. But the question is for dynamic element(tag), not attribute.

The onChange become to attrs when the tag is dynamic.

[snowyu]

sorry, I got the reason, stupid typo.

[eshimischi]

I know you can use dynamic attribute. But the question is for dynamic element(tag), not attribute.

The onChange become to attrs when the tag is dynamic.

<input
      v-if="type !== 'textarea'"
      ref="input"
      :type="newType"
      :name="name"
      :placeholder="placeholder"
      :maxlength="maxlength"
      :value="computedValue"
      v-bind="$attrs"
      onChange={this.props.onChange}   
...
/>

export default {
  inheritAttrs: false,
  props: {
     onChange: {
        type: Function,
        default: () => {}
     }
  }
}

[chanlito]

Does component work here?🤔

[snowyu]

Yes, in fact it's not here, it should be in https://github.com/vuejs/jsx/tree/master/packages/babel-plugin-transform-vue-jsx/ .

Here just is tsx syntax checker. I've just found it.

jsx is still not very useful for complex component, such as: https://github.com/snowyu/qinputex

[mesqueeb]

@snowyu also see this answer: vuejs/jsx-vue2#104 (comment)

very helpful!