[英]How can I pass a component's method as a prop to a child component? [REACT]
I have two components, a ListContact and a ListSupplier.我有两个组件,一个 ListContact 和一个 ListSupplier。 The ListSupplier is child to ListContact.
ListSupplier 是 ListContact 的子级。 My contact component has a table with display results.
我的联系人组件有一个显示结果的表格。 The supplier component opens up a modal on the contact component, from which a selection is made to change the results of the table in the first component.
供应商组件在联系组件上打开一个模式,从中选择更改第一个组件中表格的结果。
const ListContact = () => {
const [contacts, setContacts] = useState([]);
...
//Populate contact table function
const getContact = async () => {
try {
const response = await fetch(`http://localhost:5000/contact/`);
const jsonData = await response.json();
setContacts(jsonData);
} catch (err) {
console.log(err.message);
}
}
//Populate contact table function with supplier id
const getSupplierContacts = async (supplier_id) => {
try {
const response = await fetch(`http://localhost:5000/contact_supplier/${supplier_id}`);
const jsonData = await response.json();
setContacts(jsonData);
} catch (err) {
console.log(err.message);
}
}
useEffect(() => {
getContact();
}, []);
return <Fragment>
<ListSuppliers/>
<table className="table mt-5">
<thead>
<tr>
<th>Contact Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{contacts.map(contact => (
<tr key={contact.contact_id}>
<td>{contact.contact_name}</td>
<td><EditContact contact={contact}/></td>
<td><button className="btn btn-danger" onClick={()=> deleteContact(contact.contact_id)}>Delete</button></td>
</tr>
))}
</tbody>
</table>
</Fragment>
In particular I want to use the getSupplierContact method from ListContact.特别是我想使用 ListContact 中的 getSupplierContact 方法。
const ListSuppliers = () => {
const [suppliers, setSuppliers] = useState([]);
...
useEffect(() => {
getSuppliers();
}, []);
return <Fragment>
<table className="table mt-5">
<thead>
<tr>
<th>Supplier Name</th>
<th>Choose Supplier</th>
</tr>
</thead>
<tbody>
{suppliers.map(supplier => (
<tr key={supplier.supplier_id}>
<td>{supplier.supplier_name}</td>
<td><button className="btn btn-info" onClick={()=> getSupplierContacts(supplier.supplier_id)}>Choose Supplier</button></td>
</tr>
))}
</tbody>
</table>
</Fragment>
Any help much appreciated!非常感谢任何帮助! Let me know if I can add any more info to the OP
让我知道是否可以向 OP 添加更多信息
//Attempt at solution
<button className="btn btn-info" onClick={()=> getSupplierContacts(supplier.supplier_id)}>Choose Supplier</button>
it is quite simple actually, you pass the props as an object on the call for listSuppliers实际上很简单,你在调用 listSuppliers 时将道具作为 object 传递
const ListContact = () => {
const [contacts, setContacts] = useState([]);
...
//Populate contact table function
const getContact = async () => {
try {
const response = await fetch(`http://localhost:5000/contact/`);
const jsonData = await response.json();
setContacts(jsonData);
} catch (err) {
console.log(err.message);
}
}
//Populate contact table function with supplier id
const getSupplierContacts = async (supplier_id) => {
try {
const response = await fetch(`http://localhost:5000/contact_supplier/${supplier_id}`);
const jsonData = await response.json();
setContacts(jsonData);
} catch (err) {
console.log(err.message);
}
}
useEffect(() => {
getContact();
}, []);
return <Fragment>
<ListSuppliers getSupplierContacts={getSupplierContacts}
/>
<table className="table mt-5">
<thead>
<tr>
<th>Contact Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{contacts.map(contact => (
<tr key={contact.contact_id}>
<td>{contact.contact_name}</td>
<td><EditContact contact={contact}/></td>
<td><button className="btn btn-danger" onClick={()=> deleteContact(contact.contact_id)}>Delete</button></td>
</tr>
))}
</tbody>
</table>
</Fragment>
And then you use it in your listSuppliers comp.net like this然后像这样在 listSuppliers comp.net 中使用它
const ListSuppliers = ({getSupplierContacts }) => {
const [suppliers, setSuppliers] = useState([]);
//and you can call it now inside this component
getSupplierContacts ()
...
useEffect(() => {
getSuppliers();
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.