> But seriously I can't use `<SomeThing onClick={this.handleClick}/>`?
Give a try to Vue.js, you can do exactly this. This framework reconciled me with frontend development after I discovered it on HN. Let's say you want to build a custom button with a special functionality and reuse it, like a button that logs when it has been clicked. Simply create a component like this (it's almost self-explanatory):
<template>
<div class="colored-box">
<p @click="logClick">{{ text }}</p>
</div>
</template>
<script>
export default {
name: 'LogButton',
props: [
'text'
],
methods: {
logClick: function () {
console.log('The button "' + this.text + '" has been pressed"')
this.$emit('click')
}
}
}
</script>
<style scoped>
.colored-box {
background-color: red;
border: solid 1px black;
}
</style>
There are 3 sections in the file, one for the HTML template, one for Javascript code, one for CSS style. All this belongs to the same components, so the methods you defined in the javascript code can be called directly from the html template as you wanted.Once your component is ready, you can use it in other files, and in a damn simple way:
<LogButton text="Delete" @click="…" />