Question

反应组件

var ExamForm = React.createClass({
  handleSubmit: function ( event ) {
    var course_name = this.refs.courseName.getDOMNode().value;
    $.ajax({
      url: "/administration/exams",
      type: "POST",
      data: {
        exam: { class_name: course_name }
      }
    });
    this.refs.form.getDOMNode().reset();
    return false;
  },
  render: function () {
    return (
      <form onSubmit={ this.handleSubmit } className="form-horizontal" ref="form">
            <input type="text" className="form-control" ref="courseName"/>
            <button type="submit" className="btn btn-primary pull-right">Create</button>
      </form>
    )
  }
});

控制器

require_dependency "administration/application_controller"

module Administration
  class ExamsController < ApplicationController
    def create
      @exam = Exam.new(exam_params)
      if @exam.save
        #Go to index page
      else
        #Display basic error message
      end
    end
    private
    def exam_params
      params.require(:exam).permit(:class_name)
    end
  end
end

我想从一个在React组件中填写的表单创建一个新的Exam记录。到目前为止，我所得到的只是“POST localhost：3001 / administration / exams 500（内部服务器错误）”。我不知道如何调试此错误。我也会接受任何能够实现我想要做的事情的答案，即来自React Component的Ajax Post数据。

Answer 1

将return false替换为event.preventDefault()。

使用React表单组件创建记录

1 个答案: