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

Question

我要做什么？

制作一个可以与父组件一起工作的可重用 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>
    );

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

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

Using React Hooks, how do I make a reusable component and parent component that utilize each other?

javascript

components

reactjs

react-component

react-hooks