javascript - React.JS - 如何让 onClick 连续工作？

Question

我有一个名为 Row 的简单 React 组件，它有两个其他组件:

• ViewRow用户可以看到的实际行。
• SubRow 隐藏在 ViewRow 下。

我在这里试图完成的是将 onClick 添加到 ViewRow 组件，以便在单击它时 SubRow 组件更改其显示隐藏起来，以便用户可以看到有关此人的更多数据。

我尝试了一个简单的按钮，它具有相同的 onClick 并且一切正常；它执行测试字符串的 console.log，当用于 setState 时，它也会成功更改状态。当我尝试将它传递给 ViewRow 组件时，它什么也没做，甚至没有破坏我的代码。

行组件

class Row extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
    this.toggleActive = this.toggleActive.bind(this);
  };

  toggleActive(e) {
    // let currentState = this.state.isActive;
    // this.setState({ isActive: !currentState });
    console.log("button pressed: ")
  };

  render() {
    console.log(this.props);
    return (
      <React.Fragment>
        {/*<button onClick={this.toggleActive.bind(this)}> click </button>*/}

        <ViewRow
          id={this.props.person.id}
          fname={this.props.person["First Name"]}
          lname={this.props.person["Last Name"]}
          birthdate={this.props.person.birthdate}
          email={this.props.person.email}
          gender={this.props.person.gender}
          address={this.props.person.address} 
          onClick={this.toggleActive}
        />

        <SubRow person={this.props.person} />

      </React.Fragment>
    );
  }

};

ViewRow 组件

class ViewRow extends Component {

  render() {

    return (
      <tr className="row">
        <ColData className="first" data={this.props.id} />
        <ColData data={this.props.fname} />
        <ColData data={this.props.lname} />
        <ColData data={this.props.birthdate} />
        <ColData data={this.props.email} />
        <ColData data={this.props.gender} />
        <ColData data={this.props.address} />
      </tr>
    );
  }

};

子行组件

class SubRow extends Component {
  render() {
    return (
      <tr className="hidden">
        <td colSpan="7">
          <div>
            <SubRowContent 
              isActive={this.props.isActive}
              company={this.props.person.company}
              emplid={this.props.person["Employee ID"]}
            />
          </div>
        </td>
      </tr>
    );
  }
};

我希望 onclick 函数可以更改状态，以便最终我可以使用它来切换 SubRow 组件的显示。

Answer 1

只需将状态变量传递给您的组件，以便您可以在需要时显示它

class Row extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
    this.toggleActive = this.toggleActive.bind(this);
  };

  toggleActive(e) {
    // let currentState = this.state.isActive;
    this.setState({ isActive: !currentState });
    console.log("button pressed: ")
  };

  render() {
    console.log(this.props);
    return (
      <React.Fragment>
        {/*<button onClick={this.toggleActive.bind(this)}> click </button>*/}

        <ViewRow
          id={this.props.person.id}
          fname={this.props.person["First Name"]}
          lname={this.props.person["Last Name"]}
          birthdate={this.props.person.birthdate}
          email={this.props.person.email}
          gender={this.props.person.gender}
          address={this.props.person.address} 
          onClick={this.toggleActive}
        />

        <SubRow person={this.props.person} active={this.state.isActive} />

      </React.Fragment>
    );
  }

};

那么子行就可以做到这一点

class SubRow extends Component {
  render() {
    return (
      <tr className={this.props.active ? undefined : "hidden">
        <td colSpan="7">
          <div>
            <SubRowContent 
              isActive={this.props.isActive}
              company={this.props.person.company}
              emplid={this.props.person["Employee ID"]}
            />
          </div>
        </td>
      </tr>
    );
  }
};

您可以根据需要随意修改，但要点就在那里。当您为父组件设置状态时，将该标志传递给隐藏的子组件，以便您可以删除 hidden 类。