React JS 显示点击的表格行

Question

我目前正在尝试通过调用某个 API 构建一个使用 JSON 数组的简单应用程序来学习 React。然后我想在表格中显示数组的结果，并能够单击其中一行并从该行获取数据以更新页面的另一部分。

我已成功调用 API 并在表格中显示了正确的数据，但我正在努力弄清楚如何在单击页面的另一部分后显示数据。我创建了一个单击处理程序事件，可以将信息记录到控制台，但不知道如何在页面上为单击的相关行显示此数据。

所以我目前在我的页面中有这个：

<div class="container"></div>

<script type="text/jsx">

    var ShowData = React.createClass({

          getInitialState: function() {
            return { data: [] };
          },

          componentDidMount: function() {
            $.get(this.props.source, function(data) {
              if (this.isMounted()) {
                this.setState({
                    data: data
                });
              }
            }.bind(this));
          },

          handleClick: function(i) {
            console.log('You clicked: ' + this.state.data[i].event + this.state.data[i].name);
          },

          render: function() {
            var self = this;
            return (
                <table className="m-table">
                    <thead>
                            <tr>
                                <th>Event</th>
                                <th>Name</th>
                            </tr>
                        </thead>
                    <tbody>
                    {this.state.data.map(function(type, i){
                   return (
                        <tr>
                            <td title="Type" onClick={self.handleClick.bind(this, i)} key={i}>{type.event}</td>
                            <td title="Type">{type.name}</td>
                        </tr>
                    )
                })}

                        </tbody>
                    </table>
            );
          }

        });

  React.render(
          <ShowData source="url of api" />,
          document.getElementById('container')
        );

</script>

此脚本下方是另一个容器，我想在单击表格行时显示结果。

总而言之，我想在表格中显示来自 API 调用的数据，单击其中一个表格行后，我想获取表格行数据并将其格式化到页面上的另一个容器中。

Answer 1

我会将表格组件和显示区域组件都移动到负责管理状态的父组件中。父组件将传递一个回调以处理向下单击表格的行，这与下面对您的代码示例的编辑行类似。 （提醒：写这篇文章时，由于旅行，过去 40 多个小时没有睡觉......）

<div class="container"></div>

<script type="text/jsx">

    var TableComponent = React.createClass({   
          handleClick: function(i) {
             this.props.clickHandler(i);
          },

          render: function() {
            var self = this;
            return (
                <table className="m-table">
                    <thead>
                            <tr>
                                <th>Event</th>
                                <th>Name</th>
                            </tr>
                        </thead>
                    <tbody>
                    {this.props.data.map(function(type, i){
                   return (
                        <tr>
                            <td title="Type" onClick={self.handleClick.bind(this, i)} key={i}>{type.event}</td>
                            <td title="Type">{type.name}</td>
                        </tr>
                    )
                })}

                        </tbody>
                    </table>
            );
          }

        });

  var DetailsArea = React.createClass({
      render: function() {
          var rowDetails = this.props.rowDetails;

          return <div>{rowDetails.name}</div>;
      }
  });

  var ParentComponent = React.createClass({
      getInitialState: function() {
          return {data: []};
      },

      componentDidMount: function() {
          $.get(this.props.source, function(data) {
            if (this.isMounted()) {
              this.setState({
                  data: data
              });
            }
          }.bind(this));
       },

       rowClickHandler: function(rowIndex) {
           this.setState({selectedRow: rowIndex});
       },

       render: function() {
           var tableData = this.state.data;
           return (
               <TableComponent data={tableData} clickHandler={rowClickHandler} />
               <DetailsArea rowDetails={tableData[this.state.selectedRow]} />
       }
  });

  React.render(
          <ParentComponent source="url of api" />,
          document.getElementById('container')
        );

</script>