如何从子级到父级获取状态变量？答案

【问题标题】：How do I get a state variable from child to parent?如何从子级到父级获取状态变量？
【发布时间】：2021-12-04 02:54:09
【问题描述】：

我正在学习 React。
我有这样的组件结构 -

index.js

import React from "react";
import Button from "./Button/Button"

export default function Index() {

  return (
    <>
    <Button />
    <div>Value of flag in Index.js = {}</div>
    </>
  );
}

Button.js

import React, { useState } from "react";
import "./button.css";

export default function Button(props) {
  const [flag, setFlag] = useState(true);
  const clickHandler = () => {
      setFlag(!flag);   
  };

  return (
      <div className="btn" onClick={clickHandler}>
        Value of flag in Button.js = {flag.toString()}
      </div>
  );
}

我的问题是“如何从 Button.js 获取 flag 值到 index.js”？（孩子到父母）。

【问题讨论】：

看这里stackoverflow.com/questions/27864951/…
这能回答你的问题吗？ Pass props to parent component in React.js
这能回答你的问题吗？ How to access a child's state in React

标签： reactjs

【解决方案1】：

1) 您可以提升父组件中的状态并将状态和处理程序作为道具传递给子组件。

注意：这是可行的，因为您在 JSX 中需要 flag，但是如果您将事件处理程序作为道具传递给子组件，那么您必须调用处理程序来获取价值。所以要么lift the state要么使用Redux

现场演示

App.js

const App = () => {
    const [flag, setFlag] = useState( true );
    return (
        <>
            <Button flag={flag} setFlag={setFlag} />
            <div>Value of flag in Index.js = { flag.toString() }</div>
        </>
    );
};

Button.js

export default function Button({ flag, setFlag }) {
    
    const clickHandler = () => {
        setFlag(oldFlag => !oldFlag);
    };

    return (
        <div className="btn" onClick={clickHandler}>
            Value of flag in Button.js = {flag.toString()}
        </div>
    );
}

2) 您可以在子组件中将处理程序作为道具传递，如Harsh Patel 答案所示

3)您可以使用状态管理工具，即Redux。

【讨论】：

如果我使用@Harsh Patel 答案，如何在<div>Value of flag in Index.js = {}</div> 内的index.js 中打印flag？
你不能不再次引入状态，因为你必须调用getFlagValue函数来打印值。但你不会得到价值。您可以在父组件中创建一个状态，然后在调用getFlagValue 时立即更改它。但我不建议这样做，因为我们在这里使情况复杂化。
最好的选择是在父级中解除该状态。
是的，你是对的，如果我在 index.js 中使用另一个状态，那么这两个状态将不会同步在一起。所以现在我要把状态提升到 index.js。我还将学习 REDUX。如果我知道 React 的基础知识，学习 Redux 需要多长时间？
靠自己，有的需要一周，有的学得很快，一天就开始。试一试，这将是值得的。 ?

【解决方案2】：

你可以通过方法发送一个值，参考这个：

index.js

import React from "react";
import Button from "./Button/Button"

export default function Index() {

  let getFlagValue = (flag) => {
    //here you'll get a flag value
    console.log(flag)
  }

  return (
    <>
    <Button sendFlagValue=(getFlagValue)/>
    <div>Value of flag in Index.js = {}</div>
    </>
  );
}

Button.js

import React, { useState } from "react";
import "./button.css";

export default function Button(sendFlagValue) {
  const [flag, setFlag] = useState(true);
  const clickHandler = () => {
      setFlag(!flag);   
      sendFlagValue(flag)
  };

  return (
      <div className="btn" onClick={clickHandler}>
        Value of flag in Button.js = {flag.toString()}
      </div>
  );
}

【讨论】：

我也想在 index.js <div>Value of flag in Index.js = {}</div> 中打印标志值。如何做到这一点？

【解决方案3】：

状态有两种：

所有人的全局状态
组件的私有状态

首先，你必须遵守一些政策，不要尝试滥用状态，否则你会遇到一些麻烦。

对于全局状态，可以使用 Redux 或 dva 或 umijs。

对于私有状态，你似乎已经知道了。

【讨论】：