如何将组件的方法作为 prop 传递给子组件？ [反应]

Question

我有两个组件，一个 ListContact 和一个 ListSupplier。 ListSupplier 是 ListContact 的子级。 我的联系人组件有一个显示结果的表格。 供应商组件在联系组件上打开一个模式，从中选择更改第一个组件中表格的结果。

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>

特别是我想使用 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>

非常感谢任何帮助！ 让我知道是否可以向 OP 添加更多信息

//Attempt at solution

<button className="btn btn-info" onClick={()=> getSupplierContacts(supplier.supplier_id)}>Choose Supplier</button>

Answer 1

实际上很简单，你在调用 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>

然后像这样在 listSuppliers comp.net 中使用它

const ListSuppliers = ({getSupplierContacts }) => {
    const [suppliers, setSuppliers] = useState([]);
 //and you can call it now inside this component
 getSupplierContacts ()

...

useEffect(() => {
        getSuppliers();
    }, []);