无法在reactjs中添加onClick事件

qacovj5a 于 2022-12-18 发布在 React

关注(0)|答案(1)|浏览(161)

我是reactjs方面的新手。我正在尝试在我的子组件中添加一个onClick事件，如下所示：

## BlogList.js
<button onClick={handleDelete(blog.id)}>delete</button>

父组件中的handleDelete函数为：

## Home.js
    const handleDelete = (id) => {
        const newBlogs = blogs.filter((blog) => blog.id !== id)
        setBlogs(newBlogs)
    }

错误消息为：呈现其他组件（BlogList）时无法更新组件（Home）。若要在BlogList中找到错误的setState（）调用
为什么它不工作？为什么它必须写得像<button onClick={()=>handleDelete(blog.id)}>delete</button>？

reactjs

来源：https://stackoverflow.com/questions/74831770/can-not-add-a-onclick-event-in-reactjs

1条答案

按热度按时间

x8diyxa71#

<button onClick={handleDelete(blog.id)}>delete</button>

上面的代码意味着在JSX渲染之后立即执行函数。
您可以查看下面的代码来了解函数的即时执行

function handleDelete(id) {
  console.log('Executed handleDelete')
}

handleDelete() //executed immediately with `()`!

为了避免这种情况，应该像下面这样删除()

function handleDelete(id) {
  console.log('Executed handleDelete')
}

handleDelete //nothing happens!

型
类似地，在React中，可以通过引入 Package 器来避免这种情况

function handleDelete(id) {
  console.log('Executed handleDelete')
}

const onClick = () => handleDelete(1)

然后叫它就像下面

//logic
function handleDelete(id) {
   console.log('Executed handleDelete')
}

const onClick = () => handleDelete(1)

...

//JSX

<button onClick={onClick}>delete</button>

赞(0）回复(0）举报 2022-12-18

我来回答

无法在reactjs中添加onClick事件

1条答案

相关问题

热门标签

最新问答