如何使用 React 中的 Hooks 在两个子组件中更改父 state？

Question

I have a Manager component which is parent and has state of mode.
It conditionally renders two diffrent components related to their state,
I want when user clicks on Add button in child component, the state of parent changes.
also vica versa for the other sibling component.
can you help me to solve my proble, I mean how should I change parent state in children components with clicking on button.

if you help me in one children i will do the same for other one.

this is parent component:

import {React, useState} from 'react'
import BasePage from './BasePage'
import AddRecordForm from './AddRecordForm'

function Manager() {
    const [mode, setMode] = useState('base-page');
    
    function handleChangePageClick(Mode) {
        setMode(Mode);
    }
    return (
        <div>
            <h1>My PhoneBook</h1>
            {mode === 'base-page' ? <BasePage onClick = {handleChangePageClick} /> : <AddRecordForm onClick = {handleChangePageClick} />}
        </div>
    );
}

export default Manager

and this is one of its children:

import {React, useState} from 'react'
import Manager from './Manager'

function BasePage() {
    return (
        <div>
            <fieldset>
        <legend>Search</legend>
        <input placeholder = "Enter name to search" type = "text" />
    </fieldset>
            <br />
        <button onClick>Add</button>
        </div>
    );
}

export default BasePage

Answer 1

Just use the handler you're passing to the child, something like this:

import {React, useState} from 'react'
import Manager from './Manager'

function BasePage({ onClick }) {
    return (
        <div>
            <fieldset>
        <legend>Search</legend>
        <input placeholder = "Enter name to search" type = "text" />
    </fieldset>
            <br />
        <button onClick={() => onClick('add-record-form')}>Add</button>
        </div>
    );
}

export default BasePage

Answer 2

Instead of adding an onClick event to the component like you're doing here:

<BasePage onClick={handleChangePageClick} />

pass down the function as a prop:

<BasePage handleClick={handleChangePageClick} />

The child component can then call that function onClick :

function BasePage({ handleClick }) {
  return (
    <div>
      <fieldset>
        <legend>Search</legend>
        <input placeholder = "Enter name to search" type = "text" />
      </fieldset>
      <br />
      <button onClick={handleClick}>Add</button>
    </div>
  );
}

Answer 3

i suggest you to use the useContext hook or a callback function given by the parent in the props. For the useContext hook, it will put a data available for the component and all of his children.

Also by vice versa, rendering a parent component will automatically re-render the child component.

This link will help you