如何在 React 中将值从一个组件传递到另一个组件？

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 状态中包含showResults。 向EmployeeRow onEdit 添加一个更多道具 - 这是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>