React?에서 한 구성 요소의 값을 다른 구성 요소로 전달하는 방법?

데이터베이스에서 직원 테이블을 표시 중입니다. 각 레코드 끝에는 "편집"링크가 있습니다. 해당 링크를 클릭하면 해당 레코드가있는 테이블 아래에 양식을 표시 할 수 있습니다. 그리고 양식의 레코드를 편집하고 저장할 수 있어야합니다. 변경 사항은 테이블에 반영되어야합니다.React?에서 한 구성 요소의 값을 다른 구성 요소로 전달하는 방법?

아래에는 행이 생성되는 "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) 편집을 클릭하면 해당 레코드의 값을 양식에 전달해야합니다.

이 작업을 수행하는 방법을 알려주십시오. 아래에 표시된 테이블이있다 :

출처

2017-11-23 Praveen Mohan

EmployeeTable의 로컬 상태에서 더 showResults 필드가 없습니다. EmployeeRow에 포함 시켰습니다. 그건 도움이되지 않습니다. 을 EmployeeTable 상태에 포함 시키십시오. EmployeeRowonEdit에 소품 1 개 추가 - 사용자가 편집을 클릭 할 때 호출되는 EmployeeTable에 정의 된 함수 (editNavigate)입니다. editNavigate은 showResults을 true로 설정합니다.

EmployeeTable 구성 요소의 상태에 editedRow 필드를 추가하십시오. 행을 클릭 할 때마다 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>

출처

2017-11-23 12:17:19 raghu

가 문제를 해결하는 당신에게 도움이 내 대답인가? – raghu

React?에서 한 구성 요소의 값을 다른 구성 요소로 전달하는 방법?

답변

관련 문제