如何在地图中访问正确的'this'：ReactJS [英] How to access correct 'this' inside map: ReactJS

问题描述

例如，我有一个带有两种绑定方法的react组件：

  import来自'react'的React; 
 
 class注释扩展React.Component {
构造函数（props）{
 super（props）; 
 this.handleSubmit = this.handleSubmit.bind（this）; 
 this.handleRemoveComment = this.handleRemoveComment.bind（this）; 
} 
 
 handleSubmit（e）{
 ..... 
} 
 
 handleRemoveComment（e）{
 / /this.props.removeComment(null,this.props.params,i）; 
} 
 
 renderComment（评论，i）{
 return（
< div className =commentkey = {i}> 
。 .... 
< button 
 onClick = {this.handleRemoveComment} 
 className =remove-comment> 
& times; 
< /按钮> 
< / div> 
）
} 
 
 render（）{
 return（
< div className =comments） > 
 
 {this.props.postComments.map（this.renderComment）} 
 
 ..... 
< / div> 
）
} 
} 
 
出口默认评论; 
  

在上面的代码中，我有两个绑定方法：一个是 handleSubmit ，一个是 handleRemoveComment 。 handleSubmit 功能正常但 handleRemoveComment 没有。运行时，它返回错误：

TypeError：无法读取未定义的属性'handleRemoveComment'

解决方案

问题是这一行：

  {this.props.postComments.map（this.renderComment）} 
  

因为你忘了绑定 renderComment ，映射回调方法，所以这个里面的 renderComment 方法不会引用类上下文。

使用任何一个这些解决方案，它都可以。

1 - 在构造函数中使用此行：

  this.renderComment = this.renderComment.bind（this）; 
  

2 - 传递此 with with map like：

  {this.props。 postComments.map（this.renderComment，this）} 
  

3 - 使用使用 renderComment 方法的箭头函数，如下所示：

  renderComment =（comment ，i）=> {
 ..... 
  

或使用 renderComment function（我以前更喜欢这种方式），如下所示：

  renderComment（）{ 
返回this.props.postComments.map（（comment，i）=> {
 return（
< div className =commentkey = {i}> 
< p> 
< strong> {comment.user}< / strong> 
 {comment.text} 
< button 
 onClick = {this.handleRemoveComment} 
 className =remove-comment> 
& times; 
< / button> 
< / p> 
< / div> 
）
}）
} 
  

并从<$调用此方法c $ c> render ，在这种情况下，不需要绑定 renderComment ：

  {THI s.renderComment（）} 
  

For example I have a react component with two binding methods:

import React from 'react';

class Comments extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleRemoveComment = this.handleRemoveComment.bind(this);
    }

    handleSubmit(e) {
        .....
    }

    handleRemoveComment(e) {
        //this.props.removeComment(null, this.props.params, i);
    }

    renderComment(comment, i) {
        return(
            <div className="comment" key={i}>
                  .....
                  <button 
                       onClick={this.handleRemoveComment}
                       className="remove-comment">
                       &times;
                  </button>
            </div>
        )
    }

    render() {
        return(
            <div className="comments">

                {this.props.postComments.map(this.renderComment)}

                .....
            </div>
        )
    }
}

export default Comments;

In above code, I have two binding method: one is handleSubmit and one is handleRemoveComment. handleSubmit function worked but handleRemoveComment doesn't. When running, It returns error:

TypeError: Cannot read property 'handleRemoveComment' of undefined

解决方案

Issue is with this line:

{this.props.postComments.map( this.renderComment )}

Because you forgot to bind renderComment, map callback method, so this inside renderComment method will not refer to the class context.

Use any one of these solutions, it will work.

1- Use this line in constructor:

this.renderComment = this.renderComment.bind(this) ;

2- Pass this with with map like:

{this.props.postComments.map(this.renderComment, this)}

3- Use Arrow function with renderComment method, like this:

renderComment = (comment, i) => {
    .....

or use the map inside the renderComment function (i used to prefer this way), like this:

renderComment() {
    return this.props.postComments.map((comment, i) => {
        return(
            <div className="comment" key={i}>
                <p>
                    <strong>{comment.user}</strong>
                    {comment.text}
                    <button 
                        onClick={this.handleRemoveComment}
                        className="remove-comment">
                        &times;
                    </button>
                </p>
            </div>
        )
    })
}

And call this method from render, in this case binding of renderComment is not required:

{this.renderComment()}

这篇关于如何在地图中访问正确的'this'：ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！