如何通过单击父组件中的 Material UI Icon 来控制子组件答案

【问题标题】：How to control child component by click Material UI Icon in parent component如何通过单击父组件中的 Material UI Icon 来控制子组件
【发布时间】：2020-02-12 19:09:03
【问题描述】：

我的目标是通过在 React with Typescript 应用程序中单击 Material UI Icon 来控制子组件。所以我想知道如何从父组件使用 useState() 或 useRef() 访问子组件。谢谢你。

//Parent.tsx as a parent component

...
import ChildComponent from '/FormDialog';

export default function ParentComponent() {
  const classes = useStyles();

  return (
  ...
    <ChildCareIcon />    // a Material UI Icon
  ...
  )



//Child.tsx as a child component

...
export default function ChildComponent() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
    ...
  );

【问题讨论】：

如果你想让元素被父元素控制，不就是把open和setOpen作为props而不是state吗？然后它成为父母的状态并传递给孩子。

标签： reactjs typescript

【解决方案1】：

在父级中使用[open,setOpen] 并作为道具传递给子级

//Parent.tsx as a parent component

...
import ChildComponent from '/FormDialog';

export default function ParentComponent() {

  const [open, setOpen] = React.useState(false);

  const classes = useStyles();

  return (
  ...
    <ChildComponent open={open} setOpen={setOpen} />
    <ChildCareIcon />     // a Material UI Icon
  ...
  )



//Child.tsx as a child component

...
export default function ChildComponent({open,setOpen}) {

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
    ...
  );

或者在上下文中使用它们

【讨论】：

为ChildComponent设置该道具

【解决方案2】：

我无法声明已在 API 中定义的同名属性并将其注入。所以我通过用我想要制作的图标替换触发器来解决它，如下所示。

//Parent.tsx as a parent component

...
import ChildComponent from '/FormDialog';

export default function ParentComponent() {
  const classes = useStyles();

  return (
  ...
  // <ChildCareIcon />    // move to child component as trigger button.
    <ChildComponent />
  ...
  )



//Child.tsx as a child component

import ChildCareIcon from '@material-ui/icons/ChildCare'; 
...
export default function ChildComponent() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      //<Button variant="outlined" color="primary" onClick={handleClickOpen}>
      //  Open form dialog
      //</Button>

      // injected from parent component with onClick method.
      <ChildCareIcon onClick={handleClickOpen} fontSize="inherit" />    
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
    ...
  );

【讨论】：