如何解决从反应功能组件中的道具更改设置状态?
我有一个简单的反应功能组件,如下代码
import React,{ useState } from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<Test
children={
<React.Fragment>
<label>Name: </label>
<input type="text" onChange={(e) => setData(e)} />
</React.Fragment>
}
/>
</div>
);
}
export function Test({ children }) {
const [data,setData] = useState("");
return (
<>
<div>{children && children}</div>
<div>{data}</div>
</>
);
}
我的问题是如何在触发 onChange 事件时更新 data
组件内的 Test
状态?
这是sandbox
希望任何人都可以帮助我.. 提前致谢
解决方法
你不必那样送孩子。 React 有一种特定的方式来处理孩子,这更容易做和维护。在你的情况下,你只需要抬起你的状态并将 state
和 callback
作为道具发送。
import React,{ useState } from "react";
import "./styles.css";
export default function App() {
const [data,setData] = React.useState('')
return (
<div className="App">
<Test data={data}>
<> // shorthand for ReactFragment
<label>Name: </label>
<input type="text" onChange={(e) => setData(e.target.value)} value={data}/>
</>
</Test>
</div>
);
}
export function Test({ data,children }) {
return (
<>
<div>{children && children}</div>
<div>{data}</div>
</>
);
}
,
您可以为此使用 render props
技术,如果您不喜欢重大重构,您可以保持您的模式完整。
工作演示 - https://codesandbox.io/s/flamboyant-monad-hw2lu?file=/src/App.js
import React,{ useState } from "react";
import "./styles.css";
export function Child(props) {
const { setData } = props;
return (
<React.Fragment>
<label>Name: </label>
<input type="text" onChange={(e) => setData(e.target.value)} />
</React.Fragment>
);
}
export default function App() {
return (
<div className="App">
<Test
render={(props) => {
const { setData } = props;
return <Child setData={setData} />;
}}
></Test>
</div>
);
}
export function Test(props) {
const [data,setData] = useState("");
const { render } = props;
return (
<>
<div>{render({ setData })}</div>
<div>{data}</div>
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。