Question

我想知道你是否可以帮我解决这个问题？我有一个PostMain组件，它将一个函数传递给子组件PostForm。在回调的AJAX成功函数中，我传入返回的对象并调用this.props.addPost(data.title)函数。

我想知道如何在函数上设置this的上下文？然后我在父组件中调用this.setState但未定义setState，因为我没有设置this的上下文。请参阅以下代码：提前感谢。

这是父PostMain组件：

 addPost(post) {
    this.setState({posts: post.title})
  }

  render() {
    return (
      <div>
        <h1>Main form</h1>
        <PostForm addPost={this.addPost} posts={this.state.posts} />
      </div>
    )
  }
}

这是子PostForm组件：

addPost() {
    $.ajax({
     type: "POST",
     url: '/posts',
     dataType: 'json',
     data: {
           title: this.state.itemPost
         },
     success: function(data) {
        const postTitle = data.title;
        this.props.addPost(postTitle);
     }.bind(this)
    });
  }

Answer 1

只需将功能绑定到组件，然后再将其传递给您的孩子。

<PostForm addPost={this.addPost} posts={this.state.posts} />

应该是

<PostForm addPost={this.addPost.bind(this)} posts={this.state.posts} />

Answer 2

另一种方法是在onClick中设置内联状态：

 
    <PostForm addPost={this.addPost} posts={()=> this.setState({posts: post.title})} />

Answer 3

你也应该在组件中绑定它

  addPost ={ this.addPost.bind(this)}

在React中使用反向数据流设置'this'

3 个答案: