Is there any docs section which clarifies why I should use camel case for click handler, but kebab for input (and everything else)? But not for click, for click only onClick
works.
Actually I noticed that for common input both options work fine either on-input
or onInput
.
const MyJSXInput = {
props: {
value: {
type: Boolean,
required: true
},
clickHandler: {
type: Function,
required: true
},
inputHandler: {
type: Function,
required: true
},
},
// eslint-disable-next-line no-unused-vars
render(createElement) {
const { value, clickHandler, inputHandler } = this.$props
return (
<input onClick={clickHandler} on-input={inputHandler} type="checkbox" value={value} />
)
}
}
Don't know if it matters, but I use this component as render function prop for another component. Like this (all simplified):
renderProp: () => (
<MyJSXInput
value={someValue}
click-handler={this.someHandlerClick}
input-handler={this.someHandlerInput}
/>
)
And this final component has things like that:
render(h) {
return (
<div>
{this.$props.renderProp(this)}
</div>
)
}
Found piece of info here:
https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx
However I still have no idea why kebab case works for input event.