Метод OnClick не вызывается внутри таблицы - PullRequest
Новая
       11

Метод OnClick не вызывается внутри таблицы

0 голосов
/ 25 января 2020

Метод _onButtonClick не вызывается внутри метода renderTeamsTable.
Я пробовал связывать внутри renderTeamsTable, но все равно не повезло.

Я могу заставить _onButtonClick работать с кнопкой в ​​рендере. 

    export class FetchTeamData extends Component {
        displayName = FetchTeamData.name

      constructor(props) {
        super(props);
        this.state = { teams: [], loading: true, showComponent: false};
        this._onButtonClick = this._onButtonClick.bind(this);

      fetch('api/team')
      .then(response => response.json())
      .then(data => {
        this.setState({ teams: data, loading: false });



      });
    }

    _onButtonClick() {
      this.setState({
        showComponent: true,
        loading : true
      });
      console.log('method is called')
    }

    static renderTeamsTable(teams) {
      return (<table className='table'>
      <thead>
        <tr>
          <th>Team</th>
          <th>Division</th>
          <th>Conference</th>
        </tr>
      </thead>
      <tbody>
          {teams.map(team =>
            <tr key={team.id} onClick={this._onButtonClick} >
                  <td>{team.team}</td>
                  <td>{team.division}</td>
                  <td>{team.conference}</td>

      </tr>
      )}
      </tbody>
    </table>)
    }



    render() {
        let contents = this.state.loading
      ? <p><em>Loading...</em></p>
        : FetchTeamData.renderTeamsTable(this.state.teams);

    return (
      <div>
        <h1>NBA Teams</h1>
        <p>All current teams in NBA</p>

        <Button onClick={this._onButtonClick}>Button</Button>
        {this.state.showComponent ?
        <FetchPlayerFromTeamData team = {'Miami Heat'}/> :
        null
        }

        {contents}

    </div>
    );
  }
}

Ответы [ 2 ]

2 голосов
/ 25 января 2020

Это потому, что this - это не то, что вы думаете в функции static. Если вам не нужно, чтобы renderTeamsTable был stati c, просто удалите эти ключевые слова и замените FetchTeamData.renderTeamsTable на ftd.renderTeamsTable и создайте ftd в качестве экземпляра этого класса, и он должен начать работать. В противном случае, передайте this в качестве аргумента методу stati c.

0 голосов
/ 26 января 2020

Я удалил stati c из renderTeamsTable, а затем вызвал метод как this.renderTeamsTable(this.state.teams);

Это позволило onClick вызываться, как и ожидалось

Обновленный код 

export class FetchTeamData extends Component {
  displayName = FetchTeamData.name

  constructor(props) {
    super(props);
    this.state = { teams: [], loading: true, showComponent: false, selectedTeam: [] };

    fetch('api/team')
      .then(response => response.json())
      .then(data => {
        this.setState({ teams: data, loading: false });
      });
  }

  selectTeamOnClick(team) {
    this.setState({
      showComponent: true,
      loading: false,
      selectedTeam: team
    });
  }

  renderTeamsTable(teams) {
    return (<table className='table'>
      <thead>
        <tr>
          <th>Team</th>
          <th>Division</th>
          <th>Conference</th>
        </tr>
      </thead>
      <tbody>
        {teams.map(team =>
          <tr key={team.id} onClick={() => this.selectTeamOnClick(team.team)} >
            <td>{team.team}</td>
            <td>{team.division}</td>
            <td>{team.conference}</td>
          </tr>
        )}
      </tbody>
    </table>)
  }

  render() {

    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : this.renderTeamsTable(this.state.teams);


    return (
      <div>
        <h1>NBA Teams</h1>
        <p>All current teams in NBA</p>

        {this.state.showComponent ?
          <button onClick={() => this.setState({ showComponent: false })}>
            Clear Players</button> :
          null
        }

        {this.state.showComponent ?
          <FetchPlayerFromTeamData team={this.state.selectedTeam} /> :
          null
        }
        {contents}



      </div>
    );
  }
}
...