反应：在所有子组件上传递onClick函数

Question

当我单击任何子级“ postItem”组件时，我想触发一个onClick函数。 有了我现在拥有的功能，除非onClick函数在map函数之外（例如在新的单独组件中），否则单击的组件将无法执行任何操作

import React, { Component } from "react";
import axios from "axios";
import PostItem from "./postItem";
import "../styles/socialFeed.css";

class SocialFeed extends Component {
  constructor(props) {
    super(props);
    this.state = { posts: [] };
    this.showBox = this.showBox.bind(this);
  }

  showBox(postItem) {
    console.log(this);
  }

  componentDidMount() {
    this.Posts();
  }

  Posts() {
    axios
      .get(
        "randomapi"
      )
      .then(res => {
        const posts = res.data.data;
        this.setState({ posts });
      });
  }

  render() {
    let { posts } = this.state;
    let allPosts = posts.map(post => (
      <PostItem key={post.id} {...post} onClick={this.showBox} />
    ));
    return <div className="social-feed">{allPosts}</div>;
  }
}

export default SocialFeed;

通过地图传递函数是否不正确？

Answer 1

这与地图中的onClick无关。 记住，当您在ecma中思考时，函数是一流的：将函数作为prop传递过来与字符串或数组没有什么不同，并且可以映射，对吗？

问题似乎是传递给SocialFeed#showBox方法的参数。 您的方法定义为将showItem作为arg，但是onClick会将React SyntheticEvent对象作为其第一个arg传递。 从技术上讲，您可以从中获取target ，但这可能不是您想要显示的框（可能不是）。

通常，您要做的就是将参数传递给事件处理程序 ，例如：

<PostItem key={post.id} {...post} onClick={() => this.showBox(post)} />