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

Question

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

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

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

ListingPage(主页):

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>
      );
    };

    return (
      <div>
      {imageItem(itemClass, imagePath, 0 )} {/* 0 stands for unique image number I pass */}
      {imageItem(itemClass, imagePath, 1)} {/* 1 stands for unique image number I pass */}
      <Modal>
        <ImageCarousel selectedImage={this.state.selectedImage} /> {/* passing the props to the image carousel component which I then use in ImageCarousel constructor */}
      </Modal>
      </div>
    )
  }
}

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

Answer 1

您收到错误 TypeError: Cannot read property 'stopPropagation' of undefined 的原因是因为您将 number 作为参数传递。

要测试此行为，您可以执行以下操作:

const handleViewPhotosClick = (value) => {
  console.log(value);

  // handle the rest
};

如果您还希望传递事件对象，则应该在 SectionImages 组件上执行以下操作:

<div className={itemClass} onClick={(e) => { this.handleSelectedImage(e, number) }}> 
  <img src={imagePath} alt={number} />
</div>

在 ListingsPage 组件上，

const handleViewPhotosClick = (e, value: number) => {
  e.stopPropagation();
  console.log(value);

  // handle the rest
};