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

IT技术 reactjs react-hooks
2021-05-26 15:13:50

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

useEffect在这种情况下，我会使用钩子，disabled根据messageprops设置状态。你可以在这里看到整个运行的应用程序：codeandbox

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;

因此，根据messageprops，只要它“存在”，我disabled就会通过操纵setDisabledprops传递的函数将props设置为 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;
其它你可能感兴趣的问题
上一篇React Native：使用上下文将子状态挂钩到父状态 下一篇React - 我的表单正在提交空数据，因为'e' 和 'data' 已声明但从未使用过？