反應中的更新功能

Question

我是React的新手，我正在嘗試更新反應。我沒有確切的邏輯來製作它，因此我需要你的幫助。
點擊更新後，我設法獲取了所選聯繫人的值，但後來我沒有得到如何將這些值填充到輸入文本框中，並在更改值後再次提交，更新了所選聯繫人。我遇到了變化，但我不明白。

我知道的線索：
this.refs.name.value和this.refs.number.value是輸入文本框中的值。在更新時，我們需要將這些值設置爲相應索引的狀態。

我的代碼和截圖低於：
Person.js - 數作爲關鍵，考慮到個別號是唯一的

editcontact(id){ 
    this.props.onChange(id); 
    } 
    render() { 

      return(

      <div className="panel panel-default"> 
       <div className="panel-heading"> 
       <h4>{this.props.detail.name} </h4> 
       <a className="b" href="#" onClick={this.deletecontact.bind(this,this.props.detail.number)}> Delete </a> 
       &nbsp; 
       <a className="b" href="#" onClick={this.editcontact.bind(this,this.props.detail.number)}> Update </a> 
       </div> 

       <h6 className="panel-body">{this.props.detail.number}</h6> 
      </div> 
      </div> 
     ) 
     } 

它被傳遞到Contact.js

editcontact(id) 
{ 
    this.props.onChange(id); 
} 
    render() { 
    var details; 
    if(this.props.data){ 
     details=this.props.data.map(dts=>{ 
      return(
      <Person key={dts.number} detail={dts} onChange={this.editcontact.bind(this)} onDelete={this.deletecontact.bind(this)}></Person> 
     ) 
     }) 

}

然後談到App.js

handleEdit(id){ 
     console.log(id); 
     let cts=this.state.contacts; 
     let index=cts.findIndex(x => x.number === id); 
     console.log(cts[index]); 
    this.setState({ selectedContact: cts[index]; }); 

     } 

    render() { 
    return (
     <div className="App"> 
     <div className="page-header"> 

      <h2>Contact list</h2> 
     </div> 
     <AddContact newOne={this.state.selectedContact} addcontact={this.handleAddition.bind(this)}></AddContact> 
     <Contact onChange={this.handleEdit.bind(this)} onDelete={this.handleDelete.bind(this)} data={this.state.contacts}> </Contact> 
     </div> 

    ); 

}

AddContact.js

constructor(){ 
    super(); 
    this.state={ 
     newContact:{ 
     name:'', 
     number:'' 
     } 
    } 
    } 
    addcontact(e){ 
    // console.log(this.refs.name.value);\ 
    e.preventDefault(); 
     this.setState({ 
     newContact:{ 
      name: this.refs.name.value, 
      number:this.refs.number.value 
     } 
     },function(){ 
     console.log(this.state.newContact); 
     this.props.addcontact(this.state.newContact); 
     }) 
     this.refs.name.value=""; 
     this.refs.number.value=""; 
    } 



     render() { 
      console.log(this.props.newOne); 
     return (
      <div className="col-md-6"> 
      <form onSubmit={this.addcontact.bind(this)}> 
      <div className="form-group"> 
      <label>Name </label> 
      <input className="form-control" type="text" ref="name" /> 
      </div> 
      <div className="form-group"> 
      <label>Number</label> 
      <input className="form-control" type="number" ref="number" /> 
      </div> 
      <input type="submit" value="Submit"/> 
      </form> 
      </div> 
     ); 
     } 
    } 

Answer 1

你需要的是要告訴你的組件，您有一個新的狀態，你想要它重新渲染。

handleEdit(id){ 
     console.log(id); 
     let cts=this.state.contacts; 
     let index=cts.findIndex(x => x.number === id); 
     this.setState({ selectedContact: cts[index]; }); 
} 

    render() { 
    return (
     <div className="App"> 
     <div className="page-header"> 

      <h2>Contact list</h2> 
     </div> 
     <AddContact addcontact={this.handleAddition.bind(this)}></AddContact> 
     <Contact onChange={this.handleEdit.bind(this)} onDelete={this.handleDelete.bind(this)} data={this.state.contacts}> </Contact> 
     </div> 

    ); 

與setState功能，您更新此compoent的狀態，也使其重新呈現。現在你可以決定你想用這個數據做什麼：this.state.selectedContact就像將它傳遞到AddContact

Answer 2

不要使用.bind(this...沒有理由這樣做。使用attribute={() => this.functionName()}

不要使用不同的命名，對屬性名稱使用某種模式。例如addcontact應該是addContact

不要使用這麼長的行。使用Eslint向您展示所有這些提示。

現在很難讀取您的代碼，使它更具可讀性，您將有更好的時間自己編輯它。

現在有更新，我會建議使用純功能組件來顯示事物和更高階的組件來管理數據的狀態。

(props) => <form> .... <input value={props.email} /> ... </form; 

和在父組件中，它負責所有數據管理添加狀態。在狀態中，您可以使用道具保存值並將其傳遞給子組件。

當您將進入React時，您將開始使用額外的庫來管理應用程序的狀態，例如，終極版。它做出類似的事情，但所有應用程序的狀態都在一個地方，然後你可以從應用程序的任何部分訪問它。例如。您顯示這些輸入，然後跳轉到另一個應用程序狀態以添加其他內容，然後您可以輕鬆跳回到此狀態，並仍然輸入部分輸入的值。

只需將狀態值保存即可。無論您如何管理應用的狀態並推送值以使用道具來顯示組件。谷歌，閱讀，在Youtube上檢查一些視頻，你會得到它。

https://facebook.github.io/react/docs/thinking-in-react.html