反応の更新機能

Question

私は反応する初心者です。私は反応について更新しようとしています。私はそれを作るための正確な論理を得ていないので、あなたの助けが必要です。
更新をクリックすると、選択した連絡先の値を取得することができましたが、後でその値を入力テキストボックスに入力する方法がなくなり、値の変更後に提出すると選択した連絡先を更新します。私は変わりました変更するが、私は理解していない。

手がかり私は知っていた：
this.refs.name.valueとthis.refs.number.valueは入力テキストボックスにある値です。更新時には、これらの値を対応するインデックスの状態に設定する必要があります。

私のコードとスクリーンショットは以下の通りです：
Person.js - 番号をキーとしたとき、個々の数を考慮すると、これは、Contact.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> 
     ) 
     } 

ユニークです

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

は、あなたが新しい状態を持っているあなたのコンポーネントを伝えることです来て、再レンダリングする必要があります。あなたはこのcompoentの状態を更新しても、それを再描画するために作るsetState機能付き

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> 

    ); 

。今度はこのデータで何をしたいかを決めることができます：AddContact

Answer 2

.bind(this...を使用しないでください。理由はありません。 Use attribute={() => this.functionName()}

異なる名前を使用しないで、属性名にいくつかのパターンを使用してください。例えばaddcontactはaddContact

です。長い行は使用しないでください。このようなヒントをすべて表示するには、Eslintを使用します。

あなたのコードを今読んで、読みやすくして自分で編集するのがより楽になるでしょう。

今、私は更新をするために、データの状態を管理するために、純粋な機能コンポーネントと高次コンポーネントを表示することをお勧めします。

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

であり、すべてのデータ管理追加状態を担う親コンポーネント内にある。状態では、値を保存して小道具を使用して子コンポーネントに渡すことができます。

Reactに進むと、追加のライブラリを使用してアプリの状態を管理するようになります。 Redux。同様のことですが、すべてのアプリの状態は1か所にあり、アプリのどの部分からでもアクセスできます。例えば。あなたはこれらの入力を表示し、別のものを追加するために別のアプリケーションの状態にジャンプし、その後簡単にこの状態に戻って、入力された値を部分的に入力することができます。

値をstateに保存するだけです。アプリの状態をどのように管理し、値をプッシュして小道具を使用してコンポーネントを表示しても問題ありません。 Google、読んで、YouTubeでいくつかの動画をチェックし、それを取得します。

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