使用 React Hooks，我如何制作一个可重用的组件和父组件相互利用？答案

【问题标题】：Using React Hooks, how do I make a reusable component and parent component that utilize each other?使用 React Hooks，我如何制作一个可重用的组件和父组件相互利用？
【发布时间】：2021-03-25 15:39:18
【问题描述】：

我想做什么？

制作一个可以与父组件一起使用的可重用 React 组件，具体取决于父组件的需求。

目前尝试这样做的代码是什么？

ReusableComponent.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}
        />
    )
}

我期望结果是什么？

当我从父级下拉列表中选择一个值时，它会通过“console.log”反映到父组件。

实际结果如何？

控制台中没有填充任何内容。

我认为问题可能是什么？

我觉得我没有正确连接组件，我不确定如何使用 React Hooks 解决这个问题，因为多个父组件将使用这个可重用的下拉组件。

【问题讨论】：

标签： javascript reactjs react-hooks components react-component

【解决方案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}
        />
    )
}

【讨论】：