Reactで1つのコンポーネントから他のコンポーネントに値を渡す方法は？

Question

データベースから従業員テーブルを表示しています。各レコードの最後に「編集」リンクがあります。そのリンクをクリックすると、テーブルの下にフォームが表示され、対応するレコードが表示されます。フォームのレコードを編集して保存できるようにする必要があります。変更はテーブルに反映される必要があります。

以下に、行が生成される「EmployeeRow」コンポーネントがあります。 getInitialState関数のshowResultはfalseに設定されています（編集リンクをクリックした場合のみ、showResultをtrueに変換して編集フォームを表示する必要があります）。編集リンクをクリックするとトリガーされるEditnavigate機能では、編集リンクに対応するレコードの値が取得され、showResultはtrueに設定されているため、フォームが表示されます。 render関数では、編集リンクを持つ従業員レコードを含むテーブルの行が生成されます。以下

var EmployeeRow = React.createClass({ 
    getInitialState: function() { 
    return { showResults: false }; 
    }, 
    Editnavigate: function (e, id, fname,lname,gender,des,salary,city,country) { 
     this.setState({ showResults: true }); 

    }, 

    render: function() { 
     return (
      <tr> 
        <td>{this.props.item.EmployeeID}</td> 
        <td>{this.props.item.FirstName}</td> 
        <td>{this.props.item.LastName}</td> 
        <td>{this.props.item.Gender}</td> 
        <td>{this.props.item.Designation}</td> 
        <td>{this.props.item.Salary}</td> 
        <td>{this.props.item.City}</td> 
        <td>{this.props.item.Country}</td> 
        <td><a href="#" onClick={(e) => this.Editnavigate(e,this.props.item.EmployeeID,this.props.item.FirstName,this.props.item.LastName,this.props.item.Gender,this.props.item.Designation,this.props.item.Salary,this.props.item.City,this.props.item.Country)}>edit</a></td>    
       </tr> 

      ); 
    } 
}); 

は、EmployeeTableコンポーネントがある：データをデータベースから取得し、レンダリングされ、行部はEmployeeRow成分から来ます。表の横にあるフォームは、編集リンクをクリックすると表示されなければなりません。そのためには{this.state.showResults ? <EmployeeForm /> : null }を使用しています。しかし、私はフォームが表示されていないので、これが機能するとは思わない。

var EmployeeTable = React.createClass({ 

     getInitialState: function(){ 

      return{ 
       result:[] 
      } 
     }, 
     componentWillMount: function(){ 

      var xhr = new XMLHttpRequest(); 
      xhr.open('get', this.props.url, true); 
      xhr.onload = function() { 
       var response = JSON.parse(xhr.responseText); 

       this.setState({ result: response }); 

      }.bind(this); 
      xhr.send(); 
     }, 
     render: function(){ 
      var rows = []; 
      this.state.result.forEach(function (item) { 
       rows.push(<EmployeeRow key={item.EmployeeID} item={item} />); 
      }); 
      return ( <div>   
       <table className="table"> 
    <thead> 
     <tr> 
      <th>EmployeeID</th> 
      <th>FirstName</th> 
      <th>LastName</th> 
      <th>Gender</th> 
      <th>Designation</th> 
      <th>Salary</th> 
      <th>City</th> 
      <th>Country</th> 
      <th>Action</th> 
     </tr> 
    </thead> 

     <tbody> 
      {rows} 
     </tbody> 

</table> 
{this.state.showResults ? <Results /> : null } 
</div> 
); 
    } 

    }); 

1）編集リンクをクリックすると表示されるフォームが必要です。 2）編集をクリックすると、対応するレコードの値をフォームに渡す必要があります。

これを達成する方法を教えてください。以下は、表示されたテーブルがあります：

Answer 1

1. EmployeeTableのローカル状態にはshowResultsフィールドがありません。あなたはEmployeeRowにそれを含めました。 それは役に立たないでしょう。 をEmployeeTable州に含めます。 EmployeeRowonEditにもう1つの小道具を追加 - これはEmployeeTableで定義された関数（editNavigate）で、ユーザーが編集をクリックしたときに呼び出されます。 editNavigateは、showResultsをtrueに設定します。

2. フィールドeditedRowをEmployeeTableコンポーネントの状態に追加します。行がクリックされるたびにeditedRowに行の詳細が表示されます。 Resultsコンポーネントのレンダリング中にeditedRowフィールドを渡します。

   <code> 
   var EmployeeRow = React.createClass({ 
        getInitialState: function() { 
         return { }; 
        }, 
        Editnavigate: function (e,id,fname,lname,gender,des,salary,city,country) { 
          this.props.onEdit(e, id, fname,lname,gender,des,salary,city,country) 
        }, 
   
        render: function() { 
          return (
            <tr> 
               <td>{this.props.item.EmployeeID}</td> 
               <td>{this.props.item.FirstName}</td> 
               <td>{this.props.item.LastName}</td> 
               <td>{this.props.item.Gender}</td> 
               <td>{this.props.item.Designation}</td> 
               <td>{this.props.item.Salary}</td> 
               <td>{this.props.item.City}</td> 
               <td>{this.props.item.Country}</td> 
               <td><a href="#" onClick={(e) => this.Editnavigate(e,this.props.item.EmployeeID,this.props.item.FirstName,this.props.item.LastName,this.props.item.Gender,this.props.item.Designation,this.props.item.Salary,this.props.item.City,this.props.item.Country)}>edit</a></td>    
             </tr> 
   
            ); 
        } 
   }); 
   
   
   var EmployeeTable = React.createClass({ 
   
         getInitialState: function(){ 
   
           return{ 
             result:[], 
             showResults: false, 
             editedRow: {}; 
           } 
         }, 
         componentWillMount: function(){ 
   
           var xhr = new XMLHttpRequest(); 
           xhr.open('get', this.props.url, true); 
           xhr.onload = function() { 
             var response = JSON.parse(xhr.responseText); 
   
             this.setState({ result: response }); 
   
           }.bind(this); 
           xhr.send(); 
         }, 
         editNavigate = ({e, id, fname,lname,gender,des,salary,city,country}) => { 
          this.setState({ showResults: true, editedRow: { id, fname,lname,gender,des,salary,city,country } }); 
         }; 
         render: function(){ 
           var rows = []; 
           this.state.result.forEach(function (item) { 
             rows.push(<EmployeeRow key={item.EmployeeID} item={item} onEdit={this.editNavigate} />); 
           }); 
           return (  
           <div>   
             <table className="table"> 
               <thead> 
                <tr> 
                  <th>EmployeeID</th> 
                  <th>FirstName</th> 
                  <th>LastName</th> 
                  <th>Gender</th> 
                  <th>Designation</th> 
                  <th>Salary</th> 
                  <th>City</th> 
                  <th>Country</th> 
                  <th>Action</th> 
                </tr> 
               </thead> 
   
               <tbody> 
                 {rows} 
               </tbody> 
   
             </table> 
           {this.state.showResults ? 
             <Results 
              id={this.state.editedRow.id} 
              fname={this.state.editedRow.fname} 
              lname={this.state.editedRow.lname} 
              gender={this.state.editedRow.gender} 
              des={this.state.editedRow.des} 
              salary={this.state.editedRow.salary} 
              city={this.state.editedRow.city} 
              country={this.state.editedRow.country} 
             /> 
           : 
           null 
          } 
          </div> 
          ); 
         } 
       }); 
   </code>