React.JS - Как заставить onClick работать подряд?

Question

У меня есть простой React Component с именем Row, который имеет два других компонента:

• 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.