-1

您好我一直在尝试使用 onClick 按钮事件处理程序调用函数以在我的 .jsx 文件中提交表单。然而，这似乎并没有发生。以下是我用来实现相同目的的代码。

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;

应用程序.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;

反应.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>)

你能帮我解决这个问题吗？如果需要任何其他信息，请告诉我。

4

1 回答 1

1

在你的submitHandler功能中，改变

addComment(author.value, body.value)

至

this.addComment(author.value, body.value)

addComment是附加到 的Layout.prototype，因此您必须在 的实例上访问它<Layout />。

于 2016-08-15T05:52:24.767 回答