reactjs - 如何使用反应钩子将数据从子组件传递到父组件
问题描述
我有一个父组件和几个子组件。我需要根据 ErrorComponent 禁用或启用父级中的按钮。如果有错误,那么我禁用该按钮,否则我启用它。我相信我们可以将回调从子级传递给父级,让父级知道并更新按钮属性。我需要知道如何使用反应钩子来做同样的事情?我尝试了几个例子但徒劳无功。错误组件上没有事件。如果出现错误(props.errorMessage),那么我需要将一些数据传递给父级,以便我可以禁用该按钮。非常感谢任何帮助
export const Parent: React.FC<Props> = (props) => {
....
const createContent = (): JSX.Element => {
return (
{<ErrorPanel message={props.errorMessage}/>}
<AnotherComponent/>
);
}
return (
<Button onClick={onSubmit} disabled={}>My Button</Button>
{createContent()}
);
};
export const ErrorPanel: React.FC<Props> = (props) => {
if (props.message) {
return (
<div>{props.message}</div>
);
}
return null;
};
解决方案
在这种情况下,我会使用useEffect
钩子来disabled
根据message
道具设置状态。你可以在这里看到整个工作应用程序:codesandbox
ErrorPanel
组件将如下所示:
import React, { useEffect } from "react";
interface IPropTypes {
setDisabled(disabled:boolean): void;
message?: string;
}
const ErrorPanel = ({ setDisabled, message }: IPropTypes) => {
useEffect(() => {
if (message) {
setDisabled(true);
} else {
setDisabled(false);
}
}, [message, setDisabled]);
if (message) {
return <div>Error: {message}</div>;
}
return null;
};
export default ErrorPanel;
因此,根据message
道具,只要它“存在”,我disabled
就会通过操纵setDisabled
道具传递的函数将道具设置为true。
为了使这项工作,Parent
组件看起来像这样:
import React, { MouseEvent, useState } from "react";
import ErrorPanel from "./ErrorPanel";
interface IPropTypes {
errorMessage?: string;
}
const Parent = ({ errorMessage }: IPropTypes) => {
const [disabled, setDisabled] = useState(false);
const createContent = () => {
return <ErrorPanel setDisabled={setDisabled} message={errorMessage} />;
};
const handleSubmit = (e: MouseEvent) => {
e.preventDefault();
alert("Submit");
};
return (
<>
<button onClick={handleSubmit} disabled={disabled}>
My Button
</button>
<br />
<br />
{createContent()}
</>
);
};
export default Parent;
推荐阅读
- python - 如何输入公式并得到结果?
- c++ - Make zmqpp::socket::connect a std::future
- vba - VBA:带有 INDEX MATCH 的循环不会转到下一个值
- elasticsearch - 从 2 倍到 5 倍的 Elasticsearch 映射
- jasper-reports - 碧玉工作室。连接字符串和日期元素不起作用
- php - 在php中进行json编码后显示数组的键
- python - 有效地将 pandas 系列浮点数与 pandas 系列 numpy 数组进行比较
- sql - 当你有 JOOQ 的字段名称列表时如何更新表
- angular - 角度 2/4 倍数下拉
- ios - 如果一个节点被缩放,包含的 scntext 边界框不是太正常,这是否正常?