Vue, how to pass function in props in JSX render?

Question

My components looks like:

App.jsx

import MyInput from './MyInput';

const onChangeHandler = (val) => {
    console.log(val);
};

export default {
    render() {
        return (
            <MyInput onChange={onChangeHandler} />
        );
    },
};

and MyInput.jsx

export default {
    props: {
        onChange: {
            type: Function,
        },
    },
    render() {
        // as Sphinx suggested it should be this.$props.onChange
        return (
            <input onChange={this.$props.onChange} />
        );
    },
};

But this.onChange is undefined:

How to properly use this.onChange prop in MyInput component?

CodePen

Here you can find CodePen with implementation of my problem: https://codepan.net/gist/13621e2b36ca077f9be7dd899e66c056

onChange is nested, wouldn't it be this.props.onChange? Admittedly it's been a while since I've worked with Vue. — Ben
– Ben, Commented Jun 7, 2018 at 21:10
@Ben I've tried it - the same results: this.props is undefinded — Everettss
– Everettss, Commented Jun 7, 2018 at 21:27
To be clear: this.$props.onChange, this.props.onChange, _this.$props.onChange and this.onChange all of them failed. — Everettss
– Everettss, Commented Jun 7, 2018 at 21:32
what is the error for _this.$props? I created one demo below, it works fine. did you pass correct value like <my-input :on-change="function(){}"></my-input>? — Sphinx
– Sphinx, Commented Jun 7, 2018 at 21:39

Adam Orłowski · Accepted Answer · 2018-06-08 09:37:39Z

1

Don't start your prop name with on. The 'on' prefix in reserved.

Credits to: nickmessing - see his answer

answered Jun 8, 2018 at 9:37

Adam Orłowski

4,53226 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 03:30:15Z

0

Check Vue API: instance property=$props, you should use _this.$props like below demo:

Vue.config.productionTip = false

Vue.component('child', {
  props: {
    onChange: {
        type: Function,
        default: function () {console.log('default')}
    },
  },
  render: function (h) {
    let self = this
    return h('input', {
      on: {
        change: function (e) {
          var test;
          (test = self.$props).onChange(e)
        }
      }
    })
  }
})

Vue.component('container1', {
  render: function (h) {
    return h('child', {
      props: {
        onChange: this.printSome
      }
    })
  },
  methods: {
    printSome: function () {
      console.log('container 1 custom')
    }
  }
})

Vue.component('container2', {
  render: function (h) {
    return h('child', {
      props: {
        onChange: this.printSome
      }
    })
  },
  methods: {
    printSome: function () {
      console.log('container 2 custom')
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <h3>Container 1</h3>
  <container1></container1>
  <h3>Container 2</h3>
  <container2></container2>
</div>

edited Jul 16, 2022 at 3:30

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 7, 2018 at 21:08

Sphinx

10.7k2 gold badges35 silver badges50 bronze badges

3 Comments

Everettss Over a year ago

this.$props.onChange looks great. But the problem is that this.$props.onChange is still undefined. Can you update your answer to more accurately describe my example of usage MyInput in App? I can only use render functions - HTML from your last snippet is not applicable in my example.

Sphinx Over a year ago

@Everettss updated. I created two components=**container1/2** using render() function, then they will pass own custom function to props =onChange

Everettss Over a year ago

I've tried to rewrite your example in JSX and without success. You can check this codepen with your example rewritten to JSX codepan.net/gist/0538859e1768bad79035703c4b588d4e

Collectives™ on Stack Overflow

Vue, how to pass function in props in JSX render?

CodePen

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

CodePen

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related