如何将函数作为道具从功能父组件传递给子组件 [英] How to pass function as props from functional parent component to child

问题描述

父组件：

const initialValue_modalProps = [
    { show: false, response: "" }
  ];
const [modalProps, setModalProps] = useState(initialValue_modalProps)
const passedFunction = () => {
    setModalProps(modalProps => initialValue_modalProps);
  }
..
..
 <div>
        <Modal show={modalProps.show}
          response={modalProps.response}
          passedFunction={passedFunction}></Modal>
 </div>

子组件：

export default function ModalComp(props) {
    const [modalOpen, setmodalOpen] = useState(true);
    console.log('modalOpen', modalOpen);
    if (props.show === false || modalOpen === false) {
        return null;
    }
    return (<Modal isOpen={props.show}>
        <ModalHeader>Deployment Status</ModalHeader>
        <ModalBody>{props.response}</ModalBody>
        <ModalFooter>
            <Button onClick={() => {
                setmodalOpen(modalOpen => false);
                props.passedFunction();
            }}>Close</Button>
        </ModalFooter>
    </Modal>)

}

在这里，我希望将函数从父组件传递到子组件，以便子组件可以执行它来重置父组件中的状态

推荐答案

您可以将此作为现场示例演示的参考https://codesandbox.io/s/musing-mendeleev-6fvyx

function App() {
  const [status, setState] = React.useState(false);
  const [text, setText] = React.useState("");
  const handleClick = () => {
    this.setState(prev => ({ status: !prev.status }));
  };
  const handleChange = e => {
    this.setState({ text: e.target.value });
  };

  return (
    <>
      <button onClick={handleClick}>Open photo entry dialog</button>
      <ChildComponent
        isOpen={status}
        text={text}
        handleChange={handleChange}
        handleClick={handleClick}
      />
    </>
  );
}

const ChildComponent = ({ isOpen, text, handleChange, handleClick }) => {
  return (
    <>
      {isOpen && (
        <Model
          status={isOpen}
          handleClick={handleClick}
          text={text}
          handleChange={handleChange}
        />
      )}
    </>
  );
};

这篇关于如何将函数作为道具从功能父组件传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！