javascript - ReactJS 教程 - 评论表单未发布到本地服务器

Question

我正在尝试设置一个托管评论提交系统的本地服务器(根据 React tutorial )。在 CommentForm 类中，我想让表单处理评论提交，它使用 POST 请求来修改名为 comments.json 的本地文件。此 POST 请求不起作用。谁能弄清楚为什么吗？我有以下代码(我已排除 Comment 和 CommentList 类以减少困惑，但如果有帮助，我将包含它们)。打印“正在提交”的 console.log 行永远不会被执行:

var Comment = React.createClass({
  // code excluded for brevity
});

var CommentForm = React.createClass({
    handleSubmit: function(e) {
        console.log("submitting");
        e.preventDefault();
        var author = this.refs.author.value.trim();
        var text = this.refs.text.value.trim();
        if (!text || !author) {
            return;
        }
        this.props.onCommentSubmit({author: author, text: text});
        this.refs.author.value = '';
        this.refs.text.value = '';
        return;
    },
    render: function() {
        return (
            <form className = "commentForm">
                <input type="text" placeholder="Your name" ref="author"/>
                <input type="text" placeholder="Say something..." ref="text"/>
                <input type="submit" value="Post"/>
            </form>
        );
    }
});

var CommentList = React.createClass({
    // code excluded for brevity
});

var CommentBox = React.createClass({
    loadCommentsFromServer: function() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    getInitialState: function() {
        return {data: []};
    },
    handleCommentSubmit: function(comment) {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            type: 'POST',
            data: comment,
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    componentDidMount: function() {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, this.props.pollInterval);
    },
    render: function() {
        console.log("rendering box");
        return (
          <div className="commentBox">
            <h1>Comments</h1>
            <CommentList data={this.state.data} />
            <CommentForm onCommentSubmit={this.handleCommentSubmit} />
          </div>
        );
    }
});
ReactDOM.render(
    <CommentBox url="/api/comments" pollInterval = {2000} />,
    document.getElementById('content')
);

Answer 1

您忘记绑定(bind)表单处理程序的 onSubmit 事件。

<form className="commentForm" onSubmit={this.handleSubmit}>