-1
こんにちは私の.jsxファイルにフォームを送信するためにonClickボタンイベントハンドラを使用して関数を呼び出そうとしています。しかし、これは起こっていないようです。以下は、これを達成するために使用しているコードです。React JSのonClickイベントハンドラを使用して関数を呼び出せませんJSX fie
Layout.jsx（これはすべての機能ロジックを持っている）
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;
は、あなたが私を助けてもらえ
'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>)
をreact.jsxこの ？その他の情報が必要な場合はお知らせください。
あなたsubmitHandler機能で
こんにちは、私はすでにそれを試みました。ここでの問題はsubmitHanderも呼び出されていないことです。 – Sourav
より多くのコードを除外しない限り、submitボタンが呼び出されると、 'submitHandler'_will_が呼び出されます。 –
詳細を教えてください。私はこの点を理解できません。 – Sourav