0

在我的应用程序中，人们可以评论宠物的图像。我正在使用这里的反应示例，​​尽管我改变了很多东西。

现在，它成功地显示了现有的评论。现在，当用户创建评论时，我必须传递评论正文、用户 ID 和宠物 ID。我试图做以下事情：

var CommentForm = React.createClass({
handleSubmit:function()
    {
      var user=this.refs.user_id.getDOMNode().value.trim();
      var comment=this.refs.body.getDOMNode().value.trim();
      var pet_id=this.refs.pet_id.getDOMNode().value.trim();

      this.props.onCommentSubmit({comment:comment, user:user, pet:pet_id});
      if(!user||!comment||!pet_id)
        return false;
      var formData = $( this.refs.form.getDOMNode() ).serialize();
      this.props.onCommentSubmit( formData, this.props.form.action );

      // reset form
      this.refs.body.getDOMNode().value = "";
    },

render: function () {
return (
  <form ref="form" className="comment-form" action={ this.props.form.action } accept-charset="UTF-8" method="post" onSubmit={ this.handleSubmit }>
    <p><input type="hidden" name={ this.props.form.csrf_param } value={ this.props.form.csrf_token } /></p>
    <p><input type="hidden" ref="user" value={ this.props.user_id } /></p>
    <p><input type="hidden" ref="pet_id" value={ this.props.pet_id } /></p>
    <p><textarea ref="body" name="comment[text]" placeholder="Say something..." /></p>
    <p><button type="submit">Post comment</button></p>
  </form>
)
}
});

显然，它看起来并没有正确传递 pet_id，因为我收到了错误消息

ActiveRecord::RecordNotFound in CommentsController#create
Couldn't find Pet with 'id'=

我的 CommentsController 看起来像

def create
    @pet = Pet.find(params[:pet_id])
    @comment = @pet.comments.new(comment_params)
    @comment.user = current_user

为了进一步澄清，我有三个模型，Pets、Users 和 Comments，当用户发表评论时，评论获取 user_id 和 pet_id 作为其参数。

编辑：

我的反应组件看起来像

 <%= react_component('CommentBox', 
{:presenter => @presenter.to_json}, 
{:prerender => true}) %>

我的 PetController 看起来像

def show
    @comments = @pet.comments
    @user = current_user
    @presenter = {
        :comments => @comments,
        :user => current_user,
        :pet_id => @pet,
        :form => {
            :action => comments_path,
            :csrf_param => request_forgery_protection_token,
            :csrf_token => form_authenticity_token
      }
4

1 回答 1

0

所以我可以看到一些问题。首先，您使用 ref 您应该命名的地方。

<input type="hidden" ref="pet_id" value={ this.props.pet_id } />

应该

 <input type="hidden" name="pet_id" value={ this.props.pet_id } />

您同时设置了一个动作和一个onSubmit. 有理由这样做吗？为什么在执行 ajax 请求时不直接从 props 中读取呢？这很可能导致您的表单被提交并且浏览器加载另一个页面。表单提交与服务器上的内容无关。问题出在您的客户端代码中。

我还会考虑将您的模型值放入他们自己的数组中。这通常是 rails 期望从服务器返回的内容。在您的情况下，它应该params[:pet][:id]不是params[:pet_id]。然后可以直接调用许多 Rails 活动记录方法（例如更新属性），从而减少冗长的代码。

@pet = Pet.find(params[:pet][:id])
@pet.update_attributes(prams[:pet])
@pet.save
于 2015-12-07T10:53:45.060 回答