有没有一种方法可以在一个 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) => {

  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

};

Answer 2

如果您想调用作为 prop 传递的函数，您始终可以从另一个函数内部执行此操作。只需确保向其传递正确的参数（在本例中为事件）：

export default class SectionImages extends Component {

  /* constructor */

  handleSelectedImage(e, number) {

    this.props.handleViewPhotosClick(e);

    this.setState({ selectedImage: number });

  }

  render() {

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

      return (

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

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

        </div>

      );

    };

    /* return statement */

  }

}