为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕村9548890 2024-01-11 14:19:42
经过几个小时的寻找正确答案后,我找不到任何地方。我会尽力解释我的情况。我的网站上有一个图像轮播,我希望在用户触发并单击图像时将其打开。所以基本上我的网站上有 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 新手,所以这对我来说可能是错误的方法,任何帮助都意义重大。谢谢!
查看完整描述

2 回答

?
一只甜甜圈

TA贡献1836条经验 获得超5个赞

您收到错误的原因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

};


查看完整回答
反对 回复 2024-01-11
?
米脂

TA贡献1836条经验 获得超3个赞

如果您想调用作为 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 */

  }

}


查看完整回答
反对 回复 2024-01-11
  • 2 回答
  • 0 关注
  • 40 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信