Wie Formularelemente mit React's Ref abrufen?

Question

Meine Aufgabe besteht darin, ein Bild hochzuladen und die Benutzertabelle zu aktualisieren, ohne dass die Seite aktualisiert wird. Meine Suche vorgeschlagen, um die Formularelemente mit refs zu greifen, aber ich bin immer, in der Konsole:

ActionController::ParameterMissing (param is missing or the value is empty: user):

app/controllers/users_controller.rb:8:in user_params' app/controllers/users_controller.rb:3:in update'

Routen:

Rails.application.routes.draw do 
    get 'welcome/index' 

    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html 
    root 'welcome#index' 
    resources :users do 
    member do 
     post 'upload' => 'users#update' 
    end 
    end 
end 

Die App:

var User = React.createClass({ 

    componentDidMount: function(){ 
    // Trying so see what this shows in the browser console 
    var foo = $(this.refs.myForm).elements; 
    console.log(foo); 
    }.bind(this), 

    onUpload: function(){ 
    var formData = $(this.refs.myForm).serialize(); 
    $.ajax({ 
     url: '/users/1/upload', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (data) { 
      console.log("success: " + data); 
     }, 
     error: function() { 
      alert("error in ajax form submission"); 
     } 
    }); 
    }, 
    render: function(){ 
    return(
     <div> 
     <form ref="myForm" remote="true"> 
      <input type="file" name="user[avatar]" /> 
     </form> 
     {/* Placing the button outside the form prevents a refresh */} 
     <button className="button" onClick={this.onUpload}>Upload</button> 
     </div> 
    ) 
    } 
}); 
module.exports = User; 

Benutzercontroller:

Ich habe gesehen, dass im Internet andere Leute this.refs.myForm.elements verwendet haben, was ist hier falsch?

Answer 1

Änderung

<input type="file" name="user[avatar]" /> 

zu

<input type="file" name="user" /> 

remove bind(this) from componentDidMount 

Änderung

componentDidMount: function(){ 
    // Trying so see what this shows in the browser console 
    var foo = $(this.refs.myForm).elements; 
    console.log(foo); 
    }.bind(this), 

zu

componentDidMount: function(){ 
    // Trying so see what this shows in the browser console 
    var foo = $(this.refs.myForm).elements; 
    console.log(foo); 
    }, 

Answer 2

Ok. Danke für deine Hilfe, Piyush, für deine Zeit und Mühe. Du hast mir Hinweise gegeben, wonach ich suchen soll. Moh Arjmandi hat die Antwort here.

meine Funktion verkabeln:

onUpload: function(){ 
    var fd = $(this.refs.myForm).context; 
    var formData = new FormData(fd); 
    $.ajax({ 
     url: '/users/1/upload', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (data) { 
      console.log("success: " + data); 
     }, 
     error: function() { 
      alert("error in ajax form submission"); 
     } 
    }); 
    }, 

Zitiert von Moh:

serialize() is not a good idea if you want to send a form with post method. For example if you want to pass a file via ajax its not gonna work.

Und die komplette App here.