Question

我尝试从子函数调用父函数。

我按照这个例子：Expose Component Functions但是使用此代码我的页面没有加载，我的控制台是空的，所以我不知道发现问题。

我使用webpack与babel和webpack-dev-server

感谢您的回答。

我很抱歉我的英语。

class Row extends React.Component {
  render(){
      return(
        <tr className="animated slideInRight">
        <th scope="row">{this.props.data.ville_id}</th>
        <td>{this.props.data.ville_nom}</td>
        <td>{this.props.data.ville_nom_reel}</td>
        <td>{this.props.data.ville_canton}</td>
        <td><button className="btn btn-success" onClick={this.props.onClick} >Full Detail</button></td>
        </tr>
      )
  }
}

export default class Metier extends React.Component {

  constructor() {
    super();

    this.state = {
      data: [],
    };
  }
   deleteClick(e){
      console.log("ici")
  }

  render(){
    return(
            <table className="table table-striped">
                    <thead>
                    <tr>
                    <th>IdVille</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                    <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                      {this.state.data.map(function(result,i){
                        var boundClick = this.deleteClick.bind(this,i)
                        return(
                          <Row onClick={boundClick} key={i} data={result} />
                        )
                      })}
                    </tbody>
                    </table>
 )
  }
}

Answer 1

您必须使用地图中的箭头功能，以便访问this：

{this.state.data.map((result,i) => {
    var boundClick = this.deleteClick.bind(this,i)
    return(
        <Row onClick={boundClick} key={i} data={result} />
    )
})}

通过使用简单的函数，您可以创建新的上下文，并且在该函数中，您无法访问this.deleteClick。使用箭头功能，您仍然可以访问它。

使用行ReactJs在父级和子级之间进行通信

1 个答案: