使用 React Hooks，我如何制作一個可重用的組件和父組件相互利用？

Question

我想做什么？

根據父組件的需要，制作一個可以與父組件一起使用的可重用 React 組件。

當前嘗試執行此操作的代碼是什么？

可重用組件.js

import * from "react";

import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";

export default function ReusableComponent() {
    const [championClass, setChampionClass] = useState("");
        
    const handleChange = (e) => {
        setChampionClass(e.target.value);
    };

    return (
        <TextField
            onChange={handleChange}
            select
            value={championClass}
        >
            <MenuItem value={"Fighter"}>Fighter</MenuItem>
            <MenuItem value={"Mage"}>Mage</MenuItem>
            <MenuItem value={"Marksman"}>Marksman</MenuItem>
        </Textfield>
    );

父組件.js

import * from "react";

import ReusableComponent from "../ReusableComponent";

export default function ParentComponent() {
    // There's gonna be other parents such as forest, mountain, etc.)
    const [underwaterChampionClass, setUnderwaterChampionClass] 
        = useState("");

    const handleUnderwaterChampionClass = (e) => {
        setUnderwaterChampionClass(e.target.value)
        console.log(underwaterChampionClass);
    }

    return (
        <ReusableComponent 
            championClass={underwaterChampionClass} 
            setChampionClass={handleUnderwaterChampionClass}
        />
    )
}

我期望結果是什么？

當我從父級下拉列表中 select 一個值時，它通過“console.log”通過父組件反映。

實際結果是什么？

控制台中沒有填充任何內容。

我認為問題可能是什么？

我覺得我沒有正確連接組件，我不確定如何使用 React Hooks 解決這個問題，因為多個父組件將使用這個可重用的下拉組件。

Answer 1

您實際上並沒有使用從ParentComponent傳遞給ReusableComponent的道具，而是創建了兩個單獨的狀態。 您應該將ReusableComponent更改為：

import * from "react";

import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";

export default function ReusableComponent({
  value,
  handleChange
}) {
    return (
        <TextField
            onChange={e => handleChange(e.target.value)}
            select
            value={value}
        >
            <MenuItem value={"Fighter"}>Fighter</MenuItem>
            <MenuItem value={"Mage"}>Mage</MenuItem>
            <MenuItem value={"Marksman"}>Marksman</MenuItem>
        </Textfield>
    );

和ParentComponent ：

import * from "react";

import ReusableComponent from "../ReusableComponent";

export default function ParentComponent() {
    // There's gonna be other parents such as forest, mountain, etc.)
    const [underwaterChampionClass, setUnderwaterChampionClass] 
        = useState("");

    const handleUnderwaterChampionClass = (newChampionClass) => {
        setUnderwaterChampionClass(newChampionClass)
        console.log(underwaterChampionClass);
    }

    return (
        <ReusableComponent 
            value={underwaterChampionClass} 
            handleChange={handleUnderwaterChampionClass}
        />
    )
}