React18事件绑定

我谈山美，我说你媚

已于 2024-03-17 20:08:09 修改

阅读量406

点赞数 11

文章标签：前端 reactjs

于 2024-03-17 19:48:03 首次发布

本文链接：https://blog.csdn.net/m0_69853343/article/details/136787781

版权

本文详细介绍了JavaScript中事件绑定的四种常见情况，包括直接绑定、带参数的事件处理、传递参数给回调函数以及结合事件参数的传递，以实例展示了如何在React-like语法中实现这些功能。

摘要由CSDN通过智能技术生成

事件绑定中有四中情况：

情况一：直接绑定基本格式：on+事件名 = {监听的方法名} 例: onClick={handleClick}


//button按钮中绑定的 add方法
//点击添加按钮就执行add()方法
<div>
<input type="text" value={inputValue} onChange={bind}/>
<button onClick={add}>添加</button>
</div>

 //add方法
  const add=()=>{
        settodolist([...todolist,inputValue])
        setinputValue('')
    }

情况二：在情况一的基础上获取事件对象参数

例:input输入框实现双向绑定

//input框绑定onChange事件
<input type="text" value={inputValue} onChange={bind}/>

//绑定的方法中自带事件对象e
  const bind=(e)=>{
        setinputValue(e.target.value)
    }

情况三：传递参数（非事件对象参数）

例子：todolist删除操作需要携带的index

特别注意一个坑点：<button onClick={()=>{todel(index)}}>删除</button> 事件绑定是回调函数的方式，而不是像vue一样可以直接 <button onClick={todel(index)}>，因为jsx语法中{todel（index）}是执行函数，相当于绑定了这个todel(index）的返回值。

//删除时需要把index传递过去

 <ul>
  { todolist.map((item,index)=>{
                    return <li key={index}>{item} <button onClick={()=>{todel(index)}}>删除</button> </li>
                })
                }
            </ul>


//删除具体函数
   const todel=(index)=>{
        settodolist(todolist.filter((item,idx)=> idx !== index))
    }

情况四：绑定传递参数的同时，传递事件参数

<button onClick={(event) => todel(index, event)}>删除</button>

<ul>
  {todolist.map((item, index) => (
    <li key={index}>
      {item}
      <button onClick={(event) => todel(index, event)}>删除</button>
    </li>
  ))}
</ul>

//todel的处理逻辑
const  todel =(index, event)=> {
  // 在这里可以访问到事件参数 event
  console.log('Clicked on item index', index);
  // 其他处理逻辑
}