I have a <button> element inside a <BtnComponent /> (which is inside another component) and I'm trying to handle the click like this:
The BtnContainer.js parent component:
import React from 'react';
import Btn from './Btn';
var BtnContainer = React.createClass({
handleClick() {
alert('hello');
},
render() {
return (
<div id="container">
<Btn onClick={this.handleClick} />
</div>
)
}
});
module.exports = BtnContainer;
Here is the Btn.js component.
import React from 'react';
const Btn = () => (
<button className="btn">Click</button>
);
export default Btn;
I tried placing the onClick in the actual button element too but got an error.
Thoughts?
Try this:
BtnContainer.js
import React from 'react';
import Btn from './Btn';
var BtnContainer = React.createClass({
handleClick() {
alert('hello');
},
render() {
return (
<div id="container">
<Btn onClick={this.handleClick} />
</div>
)
}
});
module.exports = BtnContainer;
Btn.js
import React from 'react';
const Btn = ({ onClick }) => (
<button onClick={onClick} className="btn">Click</button>
);
export default Btn;
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments