如何使用 react 钩子将数据从子组件传递到父组件

Question

我有一个父组件和几个子组件。我需要根据错误组件禁用或启用父级中的按钮。如果有错误，那么我禁用该按钮，否则启用它。我相信我们可以将回调从子级传递给父级，并让父级知道并更新按钮属性。我需要知道如何使用反应钩子做同样的事情？我尝试了几个例子，但徒劳无功。错误组件上没有事件。如果出现错误(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;
};

Answer 1

在这种情况下，我会使用useEffect钩子，根据message道具设置disabled状态。您可以在此处查看整个工作应用程序：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道具的不同，只要它"存在"，我就会通过操作道具传递的setDisabled函数将disabled道具设置为 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;