javascript - 在 React 中处理自定义事件
问题描述
我正在使用 react 来创建联系人列表。我正在获取数据home.js
,然后将数据作为道具发送到名为contactList.js
. 在contactList.js
我有数据和一些按钮来执行编辑和删除等操作。
每当我单击删除时,它都会从服务器中删除数据,但 DOM 不会更新。我想在删除某些内容时执行自定义事件来更新 DOM。
这是组件contactList.js
:
import { Link } from 'react-router-dom';
const ContactList = ({ contacts, title }) => {
const contactDelete = (id)=>{
fetch('http://localhost:8000/contacts/' + id, {
method: 'DELETE'
}).then(() => {
console.log("deleted")
// this.$emit('delete', id)
})
}
return (
<div className="container-fluid">
<h4>{ title }</h4>
<Link to={`/contact/create`} className="waves-effect waves-light btn right"><i className="material-icons left">add</i> New</Link>
<table className="responsive-table">
<thead>
<tr>
<th>Index</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{contacts.map((contact, index) =>(
<tr key={index}>
<td>{ index + 1 }</td>
<td>{ contact.name }</td>
<td>{ contact.email }</td>
<td>{ contact.phone }</td>
<td>
<Link to={`/contact/details/${contact.id}`}><i className="material-icons green-text">visibility</i></Link>
<Link to={`/contact/edit/${contact.id}`}><i className="material-icons blue-text">edit</i></Link>
<span onClick={()=>contactDelete(contact.id)}><i className="material-icons red-text">delete</i></span>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default ContactList;
这里是home.js
:
import useFetch from '../composables/useFetch';
import ContactList from '../contacts/ContactList';
const Home = () => {
//State Hook
const {data: contacts, isLoading, isError} = useFetch('http://localhost:8000/contacts'
)
const handleDelete = (id)=>{
contacts.filter( contact => contact.id !== id )
}
return (
<div className="container">
<div className ="card">
<div className ="card-content">
{ isError && <div>{ isError }</div> }
{ isLoading && <div>Loading...</div> }
{ contacts && <ContactList contacts={ contacts } delete={handleDelete} title="Contact List"/>}
</div>
</div>
</div>
);
}
export default Home;
解决方案
在从服务器删除数据以在客户端更新后,您没有调用 delete prop(handleDelete),我建议您将 prop 重命名为 handleDelete,因为 delete 是 javascript 关键字
const contactDelete = (id)=>{ fetch('http://localhost:8000/contacts/' + id, { method: 'DELETE' }).then(() => {
//update on the client here
delete(id) // change to hanldeDelete(id)
console.log("deleted")
// this.$emit('delete', id)
})
推荐阅读
- css - 修改颜色真棒
- html - 为什么我在移动网站上没有居中对齐?
- machine-learning - 何时将数据拆分为训练和测试数据集
- python - 如何为生产保存和加载高斯过程
- c++ - Windows 上的 Apache,如何在客户端断开连接时终止 CGI?
- node.js - 如何在 rest API 上创建 500 错误以进行错误测试?
- prolog - Prolog:子列表列表
- ruby-on-rails - bootsnap 出现错误(退出代码 2),不允许设置 Rails 服务器
- amazon-web-services - 如何将 AWS GO SDK 与 RESTful API 结合使用?
- swift - 当连接airpods时,routeChangeNotification在音频切换到扬声器后检测到newDeviceAvailable