如何在ReactJs中调用另一个类函数 [英] How to call a class function from another in ReactJs

问题描述

我有两个班级俱乐部，俱乐部和主要应用课程。在俱乐部班级我得到一个俱乐部列表，我在< ul> 列表中显示它们。在俱乐部课程中，我正在尝试从俱乐部列表中获取所点击项目的详细信息。关键是我不知道如何调用俱乐部类中 club 类中的详细功能。

I have two classes club, clubs and the main app class. In the clubs class i'm getting a list of club and I am displaying them in a <ul> list. In the club class I'm trying the get the detail of the clicked item from the clubs list. The point is I don't know how to call the detail function present in the club class in the clubs class.

以下是详细信息：

分会类：

import React, { Component } from 'react';

const clubData = id => `urlto`

class Club extends Component {

constructor(props) {
super(props)
this.state = {
  requestFailed: false
}
// This binding is necessary to make `this` work in the callback
this.clubDetail = this.clubDetail.bind(this);
}

clubDetail(id) {
console.log('karim')
{/*fetch(clubData(id)
  .then(response => {
    if (!response.ok) {
      throw Error("Failed connection to the API")
    }

    return response
  })
  .then(response => response.json())
  .then(response => {
    this.setState({
      club: response
    })
  }, () => {
    this.setState({
      requestFailed: true
    })
  })*/}
}

render() {
if(!this.state.club) return <h1>No club selected !</h1>
return (
  <ul>
    <li>Name : {this.state.club.name}</li>
    <li>Email : {this.state.club.email}</li>
    <li>Website : {this.state.club.website}</li>
  </ul>
);
 }
}

 export default Club;

俱乐部 class：

import React, { Component } from 'react';

const clubsList = `urlto`


class Clubs extends Component {

constructor(props) {
super(props)
this.state = {
  requestFailed: false
}
}

componentDidMount() {
fetch(clubsList)
  .then(response => {
    if (!response.ok) {
      throw Error("Failed connection to the API")
    }

    return response
  })
  .then(response => response.json())
  .then(response => {
    this.setState({
      clubs: response
    })
  }, () => {
    this.setState({
      requestFailed: true
    })
  })
 }

 render() {
if(!this.state.clubs) return <h1>No results</h1>
return (
  <div>
    <ul>
    {this.state.clubs.map(function(item) {
        return <a key={item.id} onClick={Club.clubDetail(item.id)}><li key={item.id}>{item.name}</li></a>
    })}
    </ul>
  </div>
);
}
}

export default Clubs;

在onClick道具中，我打了这个电话 {Club.clubDetail （item.id）} 但它似乎无法正常工作

In the onClick prop, I've made this call {Club.clubDetail(item.id)} but it seems not working

主app类：

  class App extends Component {
   render() {
return (
  <div className="App">
    <div className="App-left-side">
      <Clubs></Clubs>
    </div>
    <div className="App-center-side">
      <div className="App-center-side-content">
      <Club></Club>
      </div>
    </div>
  </div>
);
 }
 }

export default App;

推荐答案

由于俱乐部和 Club 组件仅用于替换数据，因此我建议进行 api 调用从 App 组件，并将数据与onClick函数一起传递给 Clubs 组件。每当用户点击任何项目时，将id传递给父级并替换 Club 组件中点击项目的详细信息。

Since Clubs and Club components are used just to displace the data, so i will suggest to make the api call from App component, and pass the data to Clubs component along with an onClick function. Whenever user clicks on any item, pass the id to parent and displace the details of clicked item in Club component.

像这样：

应用程序组件：

const clubsList = `urlto`;

class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            requestFailed: false,
            clubs: [],
            club: {}
        }
    }

    componentDidMount() {
        fetch(clubsList)
        .then(response => {
            if (!response.ok) {
                throw Error("Failed connection to the API")
            }
            return response
        })
        .then(response => response.json())
        .then(response => {
            this.setState({
                clubs: response
            })
        }, () => {
            this.setState({
                requestFailed: true
            })
        })
    }

    click = (id) => {
        console.log('clicked item', id);
    }

    render() {
        return (
            <div className="App">
                <div className="App-left-side">
                    <Clubs clubs={this.state.clubs} clicked={this.click}/>
                </div>
                <div className="App-center-side">
                    <div className="App-center-side-content">
                        <Club club={this.state.club}/>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

俱乐部组件：

class Clubs extends Component {

    render() {
        if(!this.props.clubs.length) return <h1>No results</h1>

        return (
            <div>
                <ul>
                    {this.props.clubs.map((item) => {
                        return <a key={item.id} onClick={() => this.props.clicked(item.id)}>
                                  <li key={item.id}>{item.name}</li>
                              </a>
                    })}
                </ul>
            </div>
        );
    }
}

export default Clubs;

分会组件：

class Club extends Component {

    render() {
        if(!Object.keys(this.props.club)) return <h1>No club selected !</h1>;

        return (
            <ul>
                <li>Name : {this.props.club.name}</li>
                <li>Email : {this.props.club.email}</li>
                <li>Website : {this.props.club.website}</li>
            </ul>
        );
    }
}

export default Club;

这篇关于如何在ReactJs中调用另一个类函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！