Как использовать Material UI Fade для затухания компонента при вводе текстового поля?

Question

У меня есть текстовое поле ввода. Я хочу добавить еще один отдельный вспомогательный компонент, когда пользователь фокусируется на поле ввода.

Я обернул вспомогательный компонент следующим образом:

<Fade in={checked}>
  <DynamicHelperText level={helperLevel} />
</Fade>

И добавил следующее к функции который уже обнаруживает входные изменения в текстовом поле:

  const [checked, setChecked] = React.useState(false);
  React.useEffect(() => {
    if (textInputValue.length) {
      setChecked(true);
    }
  }, [textInputValue.length])

(я также импортирую 'Fade' из библиотеки материалов).

Однако это не работает. Элемент не скрывается при загрузке. Также нет ошибок компиляции или консоли.

Кто-нибудь знает, как заставить это работать?

Answer 1

Пожалуйста, проверьте этот пример. Надеюсь, это поможет вам.

import {Fade, Paper} from "@material-ui/core";
import React from "react";
import {makeStyles} from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    root: {
        height: 180,
    },
    container: {
        display: 'flex',
    },
    paper: {
        margin: theme.spacing(1),
    },
    svg: {
        width: 100,
        height: 100,
    },
    polygon: {
        fill: theme.palette.common.white,
        stroke: theme.palette.divider,
        strokeWidth: 1,
    },
}));


function FadeExample() {
    const classes = useStyles();
    const [checked, setChecked] = React.useState(false);

    function changeHandler(event) {
        if (event.target.value.length > 0)
            setChecked(true);
        else
            setChecked(false);
    }

    return (
        <div className={classes.root}>
            <input onChange={changeHandler}/>
            <div className={classes.container}>
                <Fade in={checked}>
                    <Paper elevation={4} className={classes.paper}>
                        <svg className={classes.svg}>
                            <polygon points="0,100 50,00, 100,100" className={classes.polygon}/>
                        </svg>
                    </Paper>
                </Fade>
            </div>
        </div>
    );
}

export default FadeExample;