如何將組件的方法作為 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();
    }, []);