Question

我正在显示数据库中的员工表。在每条记录的最后都有一个＆＃34;编辑＆＃34;链接，点击该链接我应该能够在表格下方显示一个表格，其中包含相应的记录。我应该能够编辑表单中的记录并保存，更改应该反映在表格中。

下面是＆＃34; EmployeeRow＆＃34;组件：生成行的位置。在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

showResults的本地状态中没有EmployeeTable字段。您已将其添加到EmployeeRow中。这不会有帮助。在showResults州中加入EmployeeTable。向EmployeeRow onEdit添加一个道具 - 这是editNavigate中定义的函数（EmployeeTable），当用户点击编辑时将调用该函数。 editNavigate将showResults设置为true。

将字段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>

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

1 个答案: