React ES6 onClick 改变其他组件答案

【问题标题】：React ES6 onClick change other componentsReact ES6 onClick 改变其他组件
【发布时间】：2016-03-20 02:25:14
【问题描述】：

我正在构建一个表格，该表格有一个普通行，然后是隐藏的两行，直到单击加号图标。单击该图标时，它应变为减号，隐藏行应更改 CSS 类。也应该反过来工作。

import React from 'react';

class HiddenRow extends React.Component {
  render() {
    return (
      <tr className="hidden-row">
        <td>Stuff</td>
      </tr>
    );
  }
}

class NormalRow extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('here');
    // Expand rows if hidden change icon to fa-minus-circle
    // Hide rows if not and change icon to fa-plus-circle
  }

  render() {
    return (
      <tr>
        <td><i className="fa fa-plus-circle" onClick={this.handleClick}></i> Hello</td>
      </tr>
    );
  }
}

class ParentDiv extends React.Component {
  render() {
    return (
      <div>
        <table>
          <tbody>
            <NormalRow />
            <HiddenRow />
            <HiddenRow />
            <NormalRow />
            <HiddenRow />
            <HiddenRow />
          </tbody>
        </table>
      </div>
    );
  }
}

编辑：该表将有多组普通行和隐藏行。单击正常行中的图标应仅切换两个直接隐藏的行。当我使用 Angular 但切换到 React 时，我正在使用 JQuery 来执行此操作。我一直在使用 JQuery 和 React 作为解决方案。

【问题讨论】：

标签： reactjs

【解决方案1】：

您需要一种方法在 NormalRow 组件和两个 HiddenRow 组件之间进行通信。在您的代码中，最好的方法是在 ParentDiv 中进行管理，如下所示：

class ParentDiv extends React.Component {
  constructor() {
    this.state = {
      displayHiddenRows: false
    }
  }

  render() {
    return (
      <div>
        <table>
          <tbody>
            <NormalRow onClick={this.handlePlusClicked.bind(this)} />
            <HiddenRow show={this.state.displayHiddenRows} />
            <HiddenRow show={this.state.displayHiddenRows} />
          </tbody>
        </table>
      </div>
    );
  }

  handlePlusClicked() {
    this.setState = {
      displayHiddenRows: true
    }
  }
}

在隐藏行中，通过 show 属性为 className 添加条件。在正常行中，将 handleClick 替换为 this.props.onClick 函数。

【讨论】：

这可能只是打开它们，但不确定它是否会在第二次单击时隐藏它们。认为句柄应该是this.setState = { displayHiddenRows: !this.state.displayHiddenRows }
另外，我的示例将有多组正常/隐藏行。

【解决方案2】：

看起来NormalRow 和后面的几个HiddenRows 是同一个控件的一部分。也就是说，我会考虑为它们创建一个单独的 React 组件，该组件将封装点击事件处理以及底层“正常”和“隐藏”行的查看/隐藏逻辑。所有这些都可以在纯 React 中实现（因此不需要 jQuery）。

该新的更高级别组件生成的标记将是单个或三个表行，具体取决于其状态。但是由于render 方法不能返回多个元素，因此您需要使用包装器，而我的偏好是<tbody>（而不是<div>，在这种情况下往往会被滥用）。据我所知，您可以在一个表中拥有任意数量的<tbody> 标签，因此这将是一个有效的选择。

有了这个新组件（我们称之为ActiveRow），您的ParentDiv 组件将如下所示：

class ParentDiv extends React.Component {
  render() {
    return (
      <div>
        <table>
          <ActiveRow />
          <ActiveRow />
        </table>
      </div>
    );
  }
}

请注意，我在这里删除了 <tbody> 包装器，因为它现在由 ActiveRow 返回。

【讨论】：