函数有参数时如何使用 event.preventDefault()

Question

我有这样的代码：

const upListCandy = (candy) => {
      /* How i add event.preventDefault() and it word*/
      axios.post("example.com", {
         candyName: candy.name
       }).then().catch()
    }

这是我的按钮：

dataCandy?.map((item, index) => {
   return(
      <div key={index}>
        <button onClick = {() => upListCandy(item)}>{item.name}</button>
      </div>
    )   
 })

我的问题是添加事件参数然后 event.preventDefault() 是如何工作的？

Answer 1

像这样修改你的onclick

<button onClick = {(e) => upListCandy(item,e)}>{item.name}</button>

然后

const upListCandy = (candy,event) => {
      event.preventDefault();
      axios.post("example.com", {
         candyName: candy.name
       }).then().catch()
    }

Answer 2

我想你可以这样改

dataCandy?.map((item, index) => {
   return(
      <div key={index}>
        <button onClick = {(e) => upListCandy(e,item)}>{item.name}</button>
      </div>
    )   
 })

const upListCandy = (e,ceandy) => {
      e.preventDefault()
      axios.post("example.com", {
         candyName: candy.name
       }).then().catch()
    }

函数有参数时如何使用 event.preventDefault()

How to use event.preventDefault() when function have arguments

javascript

events

event-handling

preventdefault

reactjs