reactjs - React Hooks - 改变孩子内部的状态不会反映在父母身上
问题描述
我有一个父组件(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>
);
}
我希望在子组件中修改的状态“一”在父组件中使用。我在父组件中导入了钩子。但看起来这两个组件都保留了一个单独的状态副本。我在子组件中所做的更改不会反映在父组件中。为什么会这样?如何在父组件中使用子组件修改的状态。
解决方案
状态已经在App
组件中解除。但是,您正在组件中创建一个新的Child
。
one
将and转发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
组件道具
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
}
推荐阅读
- cordova - Cordova:媒体插件录制音频空文件
- sql-server - 获取同一个表中通过外键连接的所有行
- wordpress - 统计 WordPress 网站的访问次数
- python - 如何覆盖列表并将列表附加到字典
- javascript - material-ui-dropzone,DropzoneAreaBase 不显示添加的文件预览
- r - 从 Shiny 应用程序生成可下载的报告
- javascript - JavaScript:根据对象属性中的空间拆分数组中的对象
- sql - 加密 SQL Server 中视图列(非表)中的数据
- python - 有人知道如何一次下载一个文件吗
- powershell - 多个文件名称中的Powershell偏移数,由常量表示