I have gone through the solutions provided regarding this problem but i still have the problem.
This is my simple code
<button onClick={submitClick} id="SubmitBtn">Request Invite</button>
then in the index.js file i have this function: which is meant to execute onClick on the submit button.
function submitClick() {
window.alert("JEBE");
}
Please help.
Please bind the function in the constructor
class App extends React.Component {
constructor(props){
super(props);
this.state={
value:""
}
this.submitClick = this.submitClick.bind(this);
this.change = this.change.bind(this);
}
change(e){
this.setState({
value : e.target.value
});
}
submitClick(){
alert(this.state.value);
}
render() {
return <div>
<form>
Email <input id="MainEmail" type="email"
placeholder ="Enter your email"
onChange={this.change}
/>
<button onClick={this.submitClick}
id="SubmitBtn">Request Invite
</button>
</form>
<br/><br/>
</div>;
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>
import React from 'react' import Link from 'gatsby-link' const IndexPage = () => ( <div> <div className="Hero"> <div className="HeroGroup"> <h1>My first firesbase + react app</h1> <p>Let's explore the best way to use these tools</p> <div className="form"> <input id="MainEmail" type="email" placeholder ="Enter your email"/> <button onClick={this.submitClick} id="SubmitBtn">Request Invite</button> </div> </div> </div> </div> ) export default IndexPageTry using:
<button onClick={this.submitClick} id="SubmitBtn">Request Invite</button>
this.submitClick = this.submitClick.bind(this);