Hi I have been trying to invoke a function using onClick button event handler to submit a form in my .jsx file. However, this doesn't seem to be happening. Below are the codes I am using to achieve the same.
Layout.jsx (this has all the logic of functions)
import React from 'react';
//import ReactDOM from 'react-dom';
//import Success from "./components/success.jsx";
//import ReactDOM from 'react-dom';
class Layout extends React.Component {
constructor(){
super();
this.state = {
showComments: false,
comments:[{id:1, author:"sourav", body:"That's Awsome"}]
}
}
componentWillMount() {
console.log(this.state.comments)
}
getComments(){
return this.state.comments.map((comment) => {
var fullComment = [comment.author, comment.body].join(" ");
console.log("fullComment", fullComment);
return fullComment;
}
)
}
addComment(author, body){
console.log("inside addComment")
const commentMessage = {
id: this.state.comments.length + 1,
author,
id
}
this.setState({comments:this.state.comments.concat([commentMessage])});
}
submitHandler(event){
event.preventDefault();
let author = this.author;
let body = this.body;
console.log("author is", author);
addComment(author.value, body.value)
}
render() {
return (
<html>
<head>
<title>JSX</title>
<link rel = "stylesheet" src = "../../css/app.less"/>
</head>
<body>
<h1>Welcome to Comment form</h1>
<div id = "maincontent">
<form onSubmit = {this.submitHandler.bind(this)}>
Author : <br/>
<input placeholder = "Name" ref = {(input) => this.author = input}/><br/><br/>
Your Comment:<br/>
<textarea placeholder = "Enter comments" ref = {(textarea) => this.body = textarea}></textarea><br/><br/>
<input type = "submit" placeholder = "Add Comment"/>
</form>
<p>{this.getComments.bind(this)}</p>
</div>
</body>
</html>
);
}
}
Layout.propTypes = {
}
Layout.defaultProps = {
}
/*class CommentClass extends React.Component{
render(){
}
}*/
//ReactDOM.render(<Layout/>, document.getElementById("para"));
export default Layout;
app.jsx
'use strict';
import React from 'react';
import Layout from './layout.jsx';
import {Router, RouteHandler} from 'react-router';
/*export default React.createClass({
render: function() {
return (
<Layout {...this.props}>
<Router.RouteHandler {...this.props} />
</Layout>
);
}
});*/
class App extends React.Component{
constructor(){
super();
}
render(){
return(
<Layout {...this.props}>
<Router.RouteHandler {...this.props} />
</Layout>
)
}
}
export default App;
react.jsx
'use strict';
import React from 'react';
import { Route,createRoutes } from 'react-router';
import ReactDOM from 'react-dom';
import Layout from '../public/views/layout.jsx';
import App from '../public/views/app.jsx'
const routes = createRoutes(
<Route path='/' component={App}>
<Route path="/signin" component={Layout}></Route>
</Route>
);
/*let routes = (
<Route path='/' component={App}>
<Route path="/signin" name = "layout" component={Layout}></Route>
</Route>
)*/
export default routes;
//ReactDOM.render(<Route path = '/signin' component = {Layout}></Route>)
Could you please help me out of this ? Please let me know if any other information is required.
In your
submitHandlerfunction, changeaddComment(author.value, body.value)to
this.addComment(author.value, body.value)addCommentis a attached toLayout.prototype, so you must access it on the instance of<Layout />.