React Hooks - 改变孩子内部的状态不会反映在父母身上

Question

我有一个父组件（App.jsx）、子组件（Child.jsx）和一个 Hook（useHook hook un Hook.jsx 文件）。

Hook.jsx 下面

import { useState, createContext } from "react";

export default function useHook() {
  const [one, setOne] = useState("First Option");
  const changeOne = value => {
    console.log("calling changeOne");
    console.log(value);
    setOne(value);
  };

  return {
    one,
    changeOne
  };
}

App.jsx 下面

import React, { useState, useContext } from "react";
import "./style.css";
import useHook from "./Hooks";
import Child from "./Child";
export default function App() {
  const details = useHook();

  return (
    <div>
      <Child />
      Inside Parent Class: {details.one}
    </div>
  );
}

下面的Child.jsx

import React from "react";
import "./style.css";
import useHook from "./Hooks";

export default function Child() {
  const details = useHook();
  return (
    <div>
      <form
        onChange={e => {
          details.changeOne(e.target.value);
        }}
      >
        <select id="inputState">
          <option value="First Option">First Option</option>
          <option value="Second Option">Second Option</option>
        </select>
      </form>
      Inside Child class: {details.one}
    </div>
  );
}

我希望在子组件中修改的状态“一”在父组件中使用。 我在父组件中导入了钩子。但看起来这两个组件都保留了一个单独的状态副本。我在子组件中所做的更改不会反映在父组件中。为什么会这样？如何在父组件中使用子组件修改的状态。

Answer 1

状态已在App 组件中解除。但是，您正在 Child 组件中创建一个新组件。

将one 和changeOne 转发到Child 组件作为道具。

import React, { useState, useContext } from "react";
import "./style.css";
import useHook from "./Hooks";
import Child from "./Child";
export default function App() {
  const details = useHook();

  return (
    <div>
      <Child one={details.one} onChange={details.changeOne} />
      Inside Parent Class: {details.one}
    </div>
  );
}

然后声明Child组件props

import React from "react";
import PropTypes from "prop-types";
import "./style.css";

export default function Child(props) {
  return (
    <div>
      <form
        onChange={e => {
          props.changeOne(e.target.value);
        }}
      >
        <select id="inputState">
          <option value="First Option">First Option</option>
          <option value="Second Option">Second Option</option>
        </select>
      </form>
      Inside Child class: {props.one}
    </div>
  );
}

Child.propTypes = {
   one: PropTypes.string.required,
   changeOne: PropTypes.func.required
}