Установка onClick на false

Question

В настоящее время у меня есть таблица с помощью ползунка, чтобы предоставить дополнительную информацию для таблицы. Когда компонент слайдера открывается, у меня есть X, чтобы закрыть слайдер. Я пытаюсь заставить этот X закрыть ползунок и отобразить таблицу в ее первоначальном виде.

Вот песочница с кодом: песочница с кодом

Компонент слайдера:

function ExpandToggle(isOpenProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <Button>
        <ArrowForwardIosIcon size="small" onClick={toggle} />{" "}
      </Button>
      <SliderInfo open={isOpen} />
    </>
  );
}

Компонент SliderInfo с onClick={open=false}

export default function SliderInfo({ open }) {
  const classes = useStyles();



  return (
    <Slide direction="left" in={open} mountOnEnter unmountOnExit>
      <div className={classes.root}>
        <Grid container>
          <Grid item>
            <Typography variant="h6">Vanila Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Chocolate Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Strawberry Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Sherbert </Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">None</Typography>
          </Grid>
          <Grid item>
            <Button>
              <CloseIcon onClick={open=false} />
            </Button>
          </Grid>
        </Grid>
      </div>
    </Slide>

On CloseIcon У меня есть onClick, который я пытаюсь установить open, который передается из Slider в false, чтобы он мог закрыть компонент слайдера. На данный момент при нажатии на CloseIcon он ничего не делает.

Answer 1

Не изменяйте реквизиты напрямую.

Передайте функцию переключения точно так же, как вы передавали переменную open, и вызовите ее вместо этого.

<SliderInfo open={isOpen} toggleOpen={toggle} />

// In Sliderinfo
export default function SliderInfo({ open, toggleOpen }) {
...
<CloseIcon onClick={toggleOpen} />

Если ваш переключатель не служить той же цели, создать новую функцию, которая только устанавливает isOpen в false и использовать ее вместо этого.

Также помните, что onClick ожидает функцию. Таким образом, open=false фактически выполняется во время рендеринга, а не после щелчка. Правильный встроенный формат будет onClick={(e) => {//do stuff}}.

Answer 2

Вы можете передать функцию обратного вызова Slider, которая может вызвать ваш setIsOpen модификатор состояния, а затем передать ее onClick:

function ExpandToggle(isOpenProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <Button>
        <ArrowForwardIosIcon size="small" onClick={toggle} />{" "}
      </Button>
      <SliderInfo open={isOpen} onRequestClose={() => { setIsOpen(false) }} />
    </>
  );
}

export default function SliderInfo({ open, onRequestClose }) {
  const classes = useStyles();

  return (
    <Slide direction="left" in={open} mountOnEnter unmountOnExit>
      <div className={classes.root}>
        <Grid container>
          <Grid item>
            <Typography variant="h6">Vanila Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Chocolate Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Strawberry Ice Cream</Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">Sherbert </Typography>
          </Grid>
          <Grid item>
            <Typography variant="h6">None</Typography>
          </Grid>
          <Grid item>
            <Button>
              <CloseIcon onClick={onRequestClose} />
            </Button>
          </Grid>
        </Grid>
      </div>
    </Slide>