選択したアイテムをデータベースから削除するための API メソッドを呼び出す削除関数を使用しようとすると問題が発生します。
API はページ ID を受け入れるだけなので、ID を API に送信しようとしています。
これは、アプリのメイン コンテナーに存在する関数です。
deletePage(id) {
instance.put(`/admin/deletePage/${id}`).then((response) => {
this.getPages();
window.location.replace('/')
}).catch((error) => {
console.log(error)
})
}
次に、この関数を小道具として Dashboard コンポーネントに渡します。ここで、削除を処理する別の関数を作成します。
handleDelete(e, id) {
e.preventDefault()
this.props.deletePage(id)
}
そして最後に、私のrender関数:
render() {
const pages = this.props.pages.map((page, i) => {
return (
<div key={i}>
<h2>{page.title}</h2>
<a href={`/admin/edit-page/${i}`}>Edit</a>
<button onClick={this.handleDelete(i)}>Delete</button>
</div>
)
});
return (
<div>
<h2>Dashboard</h2>
{pages}
</div>
);
}
現在、コンソールで次のエラーが発生します。 e.preventDefault is not a function
また、preventDefault 行を削除すると、一定のリロードが発生します。
助けてください。ものを削除しようとしているだけですmwhaha
これを行うには、高階関数を使用する必要があります。別の関数を返す単なる関数です。
handleDelete(id) {
return (event)=> {
event.preventDefault()
this.props.deletePage(id)
}
}
次に、以前と同じ方法で呼び出します
<button onClick={this.handleDelete(i)}>Delete</button>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加