踩坑笔记(十一):在jsx中向事件回调函数传递参数的方法

  在jsx中遍历时,有时会往事件回调函数中传递遍历的参数,如以下场景;此时需要用到jsx中传递参数的方法。

//举例
const jobs=[1,2,3,4...]
return (
{
 jobs.map((item, index) => {
    return (
       <tr key={index}>
       <td>{item.position}</td>
       <td>{item.depart}</td>
       <td>{item.date}</td>
       //往事件回调函数中传递参数的方法:先定义一个匿名函数,在函数中调用处理的函数并传入数据
       <td><input type="submit" onClick={() => this.jobsDelete(item._id)} value="删除" /></td>
       //不可以用以下方式,否则会在渲染时直接调用
       <td><input type="submit" onClick={this.jobsDelete(item._id)} value="删除" /></td>
</tr>
   )
})

在非受控组件读取表单输入框中的数据时,实际上也是采用了该方法

在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 React 中,组件回调函数的编写方式取决于您的具体需求和组件之间的交互方式。下面是几种常见的组件回调函数的编写方式的示例。 1. 父组件向子组件传递回调函数: 父组件可以通过 props 将一个回调函数传递给子组件,子组件可以在适当的时候调用该函数,将数据或事件传递回父组件。示例代码如下: ```jsx // 父组件 class ParentComponent extends React.Component { handleCallback = (data) => { console.log('子组件传递的数据:', data); }; render() { return <ChildComponent callback={this.handleCallback} />; } } // 子组件 class ChildComponent extends React.Component { handleClick = () => { const data = 'Hello, World!'; this.props.callback(data); }; render() { return <button onClick={this.handleClick}>点击按钮</button>; } } ``` 在上述示例中,父组件通过将 `handleCallback` 函数作为 `callback` 属性传递给子组件,子组件在点击按钮时调用该函数,并传递数据给父组件。 2. 子组件向父组件传递回调函数: 子组件可以通过调用父组件传递的回调函数,将数据或事件传递回父组件。示例代码如下: ```jsx // 父组件 class ParentComponent extends React.Component { handleCallback = (data) => { console.log('子组件传递的数据:', data); }; render() { return <ChildComponent callback={this.handleCallback} />; } } // 子组件 class ChildComponent extends React.Component { handleClick = () => { const data = 'Hello, World!'; this.props.callback(data); }; render() { return <button onClick={this.handleClick}>点击按钮</button>; } } ``` 在上述示例中,子组件通过调用父组件传递的 `callback` 函数,并传递数据给父组件。 这些示例展示了父子组件之间的回调函数传递,但您也可以在同级组件之间传递回调函数,或者将回调函数作为参数传递给 Hooks 等其他场景。具体的实现方式取决于您的实际需求和组件的结构。希望这些示例对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值