在我的父组件中，有一个按钮可以控制是否显示子组件.
在输入框中，输入值存储在子组件中.当输入值时，一切看起来都很好，数据在子元素的状态下被记录得非常好.
1.
-
click to not show it
-
click to show again
CHILD的输入框的值消失了，CHILD中的STATE值也消失了.
当我再次单击以显示子元素时，如何保留该值？
在父级中:
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Child1 from "./child";
import "./styles.css";
function Parent() {
const [message, setMessage] = useState("initial text");
const [showChild,setShowChild] = useState(true);
useEffect(() => {
console.log("useeffect in parent");
});
return (
<div className="App">
<button onClick={() => setShowChild(!showChild)}>show child</button>
{showChild?
<Child1 />
:
null
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);
在子元素中:
import React, { useEffect, useState } from "react";
function Child1() {
useEffect(() => {
console.log("useeffect in child");
console.log("newMessage: " + newMessage);
});
const [newMessage, setNewMessage] = useState("");
return (
<div>
<input onChange={(event) => setNewMessage(event.target.value)} />
</div>
);
}
export default Child1;