Question

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

我已经成功调用了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

我将table-component和display area-component都移动到负责管理状态的父组件中。父组件将传递一个回调以处理行点击到表格，这与下面编辑代码示例相似。（单挑：由于旅行，在写这篇文章的过去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>

React JS显示单击的表行

1 个答案: