Javascript Vue，如何在JSX渲染中传递道具中的函数？

我的组件看起来像：

App.jsx

import MyInput from './MyInput';

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

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

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

但是

此.onChange

未定义：

如何在

MyInput

组件中正确使用

this.onChange

prop

代码笔 在这里，您可以找到我的问题的代码笔实现： 检查，您应该使用

\u此。$props

如下演示：

Vue.config.productionTip=false
Vue.component（'子'{
道具：{
一旦改变：{
类型：功能，
默认值：函数（）{console.log（'default'）}
},
},
渲染：函数（h）{
让self=这个
返回h（'输入'{
关于：{
更改：功能（e）{
var检验；
（测试=self.$props）.onChange（e）
}
}
})
}
})
Vue.组件（'container1'{
渲染：函数（h）{
返回h（'子'{
道具：{
onChange:this.printSome
}
})
},
方法：{
printSome:function（）{
console.log（'container 1 custom'）
}
}
})
Vue.组件（'container2'{
渲染：函数（h）{
返回h（'子'{
道具：{
onChange:this.printSome
}
})
},
方法：{
printSome:function（）{
console.log（'container 2 custom'）
}
}
})
新Vue({
el:“#应用程序”
})

容器1
容器2

不要将道具名称以on开头。保留中的“on”前缀

归功于：

---

onChange是嵌套的，它不是

这个.props.onChange

？诚然，我已经有一段时间没有使用Vue了。@Ben，我已经尝试过了-结果是一样的：

this.props未定义

它应该是

。$props

要清楚：

this.$props.onChange

，

this.props.onChange

，

\u this.$props.onChange

和

this.onChange

都失败了。

\u this.$props

的错误是什么？我在下面创建了一个演示，效果很好。您是否传递了正确的值，如

？

这个。$props.onChange

看起来很棒。但问题是，

this.$props.onChange

仍然是

未定义的

。您能否更新您的答案，以便更准确地描述我在

App

中使用

MyInput

的示例？我只能使用呈现函数-上一个代码片段中的HTML在我的示例中不适用。@Everettss已更新。我使用

render（）

函数创建了两个组件=**container1/2**，然后它们将自己的自定义函数传递给

props=onChange

我尝试在JSX中重写您的示例，但没有成功。您可以使用重写为JSX的示例检查此代码笔