如何在反應中將狀態從子組件傳遞到父組件

Question

在我的項目中，我有兩個組件，一個是 App.js，它是父組件，另一個是 Child.js，它是子組件。

現在在 Child.js 組件中我有一個按鈕，我編寫了一些代碼來更改 Child.js 組件按鈕的背景顏色和文本顏色。 它工作正常。

現在我想的是在我單擊按鈕之前的 Child.js 組件中，按鈕背景顏色為黃色，文本顏色為白色。 現在，如果我單擊按鈕，現在按鈕的背景顏色和文本顏色已更改。

現在我必須將子組件的更新狀態傳遞給 App.js 組件。

只有當我單擊 Child 組件時，我才必須將 onClick 函數從 child 傳遞給 Parent。

這是我的代碼

這是 App.js

import React, { useState } from 'react';
import './App.css';
import Child from './Child/Child';

const App = () => {
  return (
    <div>
      <button className='btn btn-danger'>Parent button</button>
      <Child></Child>
    </div>
  )
}

export default App

這是 Child.js

import React, { useState } from 'react';
import './Child.css';

const Child = () => {
    const [color, setColor] = useState('yellow');
    const [textColor, setTextColor] = useState('white');
    return (
        <div>
            <button className='btn btn-primary mt-5' style={{ background: color, color: textColor }}
                onClick={() => { setColor("black"); setTextColor('red') }}
            >Child Button</button>
        </div>
    )
}

export default Child

如果您覺得我不清楚我的疑問，請發表評論。

Answer 1

將函數作為道具傳遞，每當您單擊 Child 中的按鈕時都會執行該道具

https://codesandbox.io/s/access-child-component-method-react-hook-dqy0z

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

const Parent = () => {
  const [color, setColor] = useState("");
  const [textColor, setTextColor] = useState("");

  function func(color, textColor) {
    setColor(color);
    setTextColor(textColor);
  }

  return (
    <div>
      <button
        style={{ background: color, color: textColor }}
        className="btn btn-danger"
      >
        Parent button
      </button>
      <Child parentCallback={func} />
    </div>
  );
};

export default Parent;

import React, { useState } from "react";

const Child = ({ parentCallback }) => {
  const [color, setColor] = useState("yellow");
  const [textColor, setTextColor] = useState("white");

  function colorSet() {
    setColor("black");
    setTextColor("red");
    parentCallback("black", "red");
  }

  return (
    <div>
      <button
        className="btn btn-primary mt-5"
        style={{ background: color, color: textColor }}
        onClick={colorSet}
      >
        Child Button
      </button>
    </div>
  );
};

export default Child;

Answer 2

將其從孩子移動到應用程序：

const [color, setColor] = useState('yellow');
const [textColor, setTextColor] = useState('white');

而不是將這些值和函數傳遞給孩子：

<Child
  color={color}
  setColor={setColor}
  textColor={textColor}
  setTextColor={setTextColor}
>

現在您可以通過 props 在Child訪問所有這些：

const Child = ({ color, setColor, textColor, setTextColor}) => { ...

換句話說，從 child 中完全刪除 state（和 state updater 函數）。