有没有一种方法可以在一个 onClick 事件中发送道具和函数？

Question

经过几个小时的寻找正确答案后，我找不到任何地方。我会尽力解释我的情况。我的网站上有一个图像轮播，我希望在用户触发并单击图像时将其打开。所以基本上我的网站上有 5 个图像，无论用户选择哪个图像，都应该在图像轮播中打开它。一切都很完美，我做到了这一部分。所以我有一个页面文件，其中包含轮播所在页面的所有代码。然后，我有一个仅用于图像部分组件的文件，我在其中发送函数handleViewPhotosClick（此函数打开图像轮播）作为主页中的道具。因此，在这个文件中，我检测到哪个图像被单击，并将其编号发送到具有更新状态的图像轮播组件（它的编号用于打开正确的图像）。

但问题是我无法在一次 onClick 中传递handleViewPhotosClickand handleSelectedImage，或者我只是不知道正确的语法。

我不会编写完整的代码，我只会复制它。

列表页面（主页）：

export default class ListingPage extends Component {

  constructor(props) {

    this.state = {

      imageCarouselOpen: false

    };

  }

  render() {

    const handleViewPhotosClick = (e) => {

      e.stopPropagation();

      this.setState({

        imageCarouselOpen: true // This opens carousel

      });

    };

    return (

      <SectionImages

        handleViewPhotosClick={handleViewPhotosClick} {/* Passing handleViewPhotosClick to SectionImages */}

      />

    )

  }

}

SectionImages（图像部分）：

export default class SectionImages extends Component {

  constructor(props) {

    this.state = { 

      selectedImage: null,

      number: 0

    }

  }

  handleSelectedImage(number) {

    this.setState({ selectedImage: number });

  }

  render() {

    const { handleViewPhotosClick } = this.props;

    const imageItem = (itemClass, imagePath, number) => {

      return (

        // Is there a way to append handleViewPhotosClick to the bellow onClick function?

        <div className={itemClass} onClick={() => { this.handleSelectedImage(number) }}> 

            <img src={imagePath} alt={number} />

        </div>

      );

    };

    )

  }

}

所以基本上我正在尝试添加handleViewPhotosClick到imageItemonClick 函数。我知道我们可以在一次 onClick 调用中传递多个函数，但如何传递 props + 函数。希望我说得足够清楚。我是 React 新手，所以这对我来说可能是错误的方法，任何帮助都意义重大。谢谢！

Answer 1

您收到错误的原因TypeError: Cannot read property 'stopPropagation' of undefined是因为您number作为参数传递。要测试此行为，您可以执行以下操作：const handleViewPhotosClick = (value) => {&nbsp; console.log(value);&nbsp; // handle the rest};如果您还希望传递事件对象，那么您应该在SectionImages组件上执行以下操作：<div className={itemClass} onClick={(e) => { this.handleSelectedImage(e, number) }}>&nbsp;&nbsp; <img src={imagePath} alt={number} /></div>在组件上ListingsPage，const handleViewPhotosClick = (e, value: number) => {&nbsp; e.stopPropagation();&nbsp; console.log(value);&nbsp; // handle the rest};

Answer 2

如果您想调用作为 prop 传递的函数，您始终可以从另一个函数内部执行此操作。只需确保向其传递正确的参数（在本例中为事件）：export default class SectionImages extends Component {&nbsp; /* constructor */&nbsp; handleSelectedImage(e, number) {&nbsp; &nbsp; this.props.handleViewPhotosClick(e);&nbsp; &nbsp; this.setState({ selectedImage: number });&nbsp; }&nbsp; render() {&nbsp; &nbsp; const imageItem = (itemClass, imagePath, number) => {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className={itemClass} onClick={e => this.handleSelectedImage(e, number)}>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src={imagePath} alt={number} />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; };&nbsp; &nbsp; /* return statement */&nbsp; }}