如何使用 React 中的 Hooks 更改两个子组件中的父状态？答案

【问题标题】：How can I change parent state in two children components using Hooks in React?如何使用 React 中的 Hooks 更改两个子组件中的父状态？
【发布时间】：2021-08-27 07:38:41
【问题描述】：

我有一个管理器组件，它是父组件并且具有模式状态。
它有条件地渲染两个与其状态相关的不同组件，
我希望当用户单击子组件中的添加按钮时，父组件的状态会发生变化。
对于其他同级组件，反之亦然。
你能帮我解决我的问题吗？我的意思是我应该如何通过单击按钮来更改子组件中的父状态。

如果你帮助我一个孩子，我也会为另一个孩子做同样的事情。

这是父组件：

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

这是它的一个孩子：

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

【问题讨论】：

标签： javascript reactjs react-hooks state

【解决方案1】：

我建议你使用 useContext 钩子或 props 中父级给定的回调函数。对于 useContext 挂钩，它将为组件及其所有子组件提供可用的数据。

反之亦然，渲染父组件会自动重新渲染子组件。

这个link 会帮助你

【讨论】：

感谢您的帮助。我只能使用 useState 和 useEffect，
那么我猜你需要使用一个回调函数来改变父状态并通过道具将它传递给你的子组件。

【解决方案2】：

而不是像您在这里所做的那样向组件添加 onClick 事件：

<BasePage onClick={handleChangePageClick} />

将函数作为道具传递：

<BasePage handleClick={handleChangePageClick} />

然后子组件可以调用该函数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>
  );
}

【讨论】：

【解决方案3】：

只需使用您传递给孩子的处理程序，如下所示：

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

【讨论】：