React.js - Rails的：設置狀態

Question

我有兩個組成部分：App和登記表

形式有兩個輸入：名字和姓氏

綜觀開發的應用程序的狀態。我看到的工具長度：未定義和名稱：「名稱輸入」。我沒有收到任何錯誤，但我錯過了最後一個名字。

這隻發生在Rails中。我在非rails環境中嘗試了相同的代碼，並且工作正常。我使用的是這種寶石的陣營：寶石「反應護欄」，「〜> 1.5.0」和運行的Rails 4.2.4

var App = React.createClass({ 
    getInitialState : function(){ 
     return { 
      registrations: {} 
     } 
    }, 
    addRegistration : function(registration){ 
     // create unique id 
     var timestamp = (new Date()).getTime(); 
     // update state 
     this.state.registrations['registration-' + timestamp] = registration; 
     //set the state 
     this.setState({ registrations : this.state.registrations }); 

    }, 
    render : function(){ 
     return (
      <RegistrationForm addRegistration={this.addRegistration}/> 
     ) 
    } 
}); 

var RegistrationForm = React.createClass({ 
    createRegistration : function(event){ 
     // prevent default 
     event.preventDefault(); 
     // take data from form and create object 
     var registration = { 
      name : this.refs.name.value, 
      lastname : this.refs.lastname.value 
     } 
     // Add registration to App Object 
     this.props.addRegistration(registration); 
     this.refs.registrationForm.reset(); 

    //console.log(registration); 
    }, 
    render : function(){ 
     return (
      <div className="col-sm-12"> 
       <form action="" className="form" ref="registrationForm" onSubmit={this.createRegistration}> 
        <div className="form-group"> 
         <label >Name</label> 
         <input className="form-control" ref="name"/> 
        </div> 
        <div className="form-group"> 
         <label >Last Name</label> 
         <input className="form-control" ref="lastname"/> 
        </div> 
        <div> 
         <button className="btn btn-primary">Submit</button> 
        </div> 
       </form> 
      </div> 
     ) 
    } 
}); 

App = React.createFactory(App) 

我想要做的就是給每個註冊的唯一身份證號碼基於時間戳。

當我控制檯登錄以下幾點：

addRegistration : function(registration){ 
    // create unique id 
    var timestamp = (new Date()).getTime(); 
    // update state 
    this.state.registrations['registration-' + timestamp] = registration; 
    //set the state 
    this.setState({ registrations : this.state.registrations }); 

}, 

我可以看到一個登記的對象我想要的方式。我可以爲App狀態添加許多獨特的註冊，但每個註冊的長度都是：undefined，name：「name」，但它缺少姓氏。

如果我改變設定狀態，以這樣的：

this.setState({ registrations : registration }); 

這給了我的名字和姓氏的單一註冊，但它不添加多個註冊。它只創建一次註冊，每次我提交添加註冊表單時都會更新。

Answer 1

this.state.registrations['registration-' + timestamp] = registration;

你似乎直接突變狀態的基礎上，做出反應的文檔https://facebook.github.io/react/docs/component-api.html

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate() . If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate() , calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

嘗試克隆的當前狀態，然後用其作爲論據。

// if array 
var clonedRegistration = this.state.registrations.slice(); 
clonedRegistration['registration-' + timestamp] = registration; 

this.setState({registrations: clonedRegistration}) 

或

this.setState({registrations: {['registration-'+ timestamp]: registration} }); 

Answer 2

我覺得路把答案是接近。

首先將您的初始狀態設置爲數組。

getInitialState: function(){ 
     return { registrations: []} 
    } 

您addRegistration功能

addRegistration : function(registration){ 

我覺得這是你錯過了什麼：

//getting current state 
var oldRegistrations = this.state.registrations; 

否則我相信你多次更新，而不是同樣的事情，添加一個新的註冊對象。然後推動你的註冊。你應該因爲你不使用一個實際的AJAX調用一個軌道分貝某處這裏設置的時間戳

// update state 
oldRegistrations.push(registration); 
var registrations = oldRegistrations; 

//set the state 

this.setState({ registrations : registrations }); 
}, 

我會建議創建ID：

var registration = { 
      name : this.refs.name.value, 
      lastname : this.refs.lastname.value 
        id: (new Date()).getTime(); 
} 

我不知道我的理解你關於你的形式價值的問題，或者你是否遇到了麻煩。但如果你是我認爲做這樣的事情可能會有所幫助：

<input type='text' className='form-control' 
       placeholder='Name' name='name' 
       value={this.state.name} onChange={this.handleChange} > 
</input> 

<input type='text' className='form-control' 
       placeholder='Last Name' name='last name' 
       value={this.state.last_name} onChange={this.handleChange} > 
</input> 

然後實現同一個組件內的handleChange功能不斷地處理表單的價值觀的onChange。這應該是這樣的：

handleChange: function(e) { 
    var name = e.target.name; 
    var obj = {}; 
    obj[name] = e.target.value; 
    this.setState(obj); 
} 

希望這有助於