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>
    );
  }

};

SubRow组件

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类。

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

1 个答案: