Как скрыть компонент в React при клике вне компонента?

Question

[Zhanna_K]

Нашла только варианты с использованием методов жизненного цикла.

Я использую не классовые, а функциональные компоненты. Как это сделать с помощью хуков?

Comments

[Zhanna_K]

Итоговый код компонента, если кому-нибудь пригодится. Или есть замечания, тоже напишите!

const  AddProject = (props) =>  {
const [editMode, setEditMode] = useState(false);
const [newName, setNewName] = useState({});
const [newContent, setNewContent] = useState({});

  const wrapperRef = useRef();

  const handleClick = (e) => {
    if (wrapperRef.current) {
      if (!wrapperRef.current.contains(e.target)) {
        console.log("click outside add component");
        setEditMode(false);
      }
    }
  };

useEffect(() => {
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  const useStyles = makeStyles((theme) => ({
    Container: {
      margin: "0 auto",
      display: "flex",
      justifyContent: "center",
    },
    buttonBlock: {
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "center",
      marginTop: "20px",
      overflowX: "hidden",
    },
    buttonText: {
      alignSelf: "center",
      marginRight: "10px",
    },
    button: {
      marginTop: "20px",
    },
    addTaskBox: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "spaceBetween",
      alignSelf: "center",
      width: "50%",
    },
  }));

  const classes = useStyles();
  return (
    <Container className={classes.Container}>
      {!editMode ? (
        <div className={classes.buttonBlock}>
          <div className={classes.buttonText}>
            <Typography color='primary'>ADD NEW PROJECT</Typography>
          </div>
          <Fab size='small' color='primary' aria-label='add'>
            <AddIcon onClick={() => setEditMode(true)} />
          </Fab>
        </div>
      ) : (
        <Box className={classes.addTaskBox} ref={wrapperRef}>
          <Typography color='primary'>ADD NEW PROJECT</Typography>
          <Input
            placeholder='Enter title for your project'
            name='name'
            onChange={(e) => setNewName(e.target.value)}
          />

          <Input
            placeholder='Description'
            name='content'
            onChange={(e) => setNewContent(e.target.value)}
          />
          <Button
            className={classes.button}
            variant='contained'
            color='secondary'
            size='small'
            color='primary'
            aria-label='add'
            onClick={() => {
              props.addProject(props.userId, {
                name: newName,
                content: newContent,
              });
              setEditMode(false);
            }}
          >
            <Typography vatuant='button-text'>ADD </Typography>
          </Button>
        </Box>
      )}
    </Container>
  );
}

[8XL]

Могу ошибаться, но насколько понял из анализа премиальных шаблонов Material-UI, более качественной практикой считается вынос стилей в отдельный файл.

https://github.com/creativetimofficial/material-ki... (ознакомьтесь с файловой структурой, для понимания)
https://demos.creative-tim.com/material-kit-react/... (сам проект)

Могу ошибаться, но для чистоты кода было бы эффективнее вынести блоки в отдельные компоненты.
например:

{
      !editMode
      ? <Button {...props} /> 
//наименования условны, но вы можете подумать над тем, как сделать компоненты переиспользуемыми
      : <Form {...props} />
    }

Инпуты можно обернуть в тег формы и в атрибуте тега указать методы onChange и onSubmit(у кнопки type='submit'). Так у вас и состояний будет меньше.
Ознакомьтесь https://ru.reactjs.org/docs/forms.html#handling-mu...

Будет немножко чище и понятнее, если вы вынесете методы в отдельные функции.

onClick={() => {
              props.addProject(props.userId, {
                name: newName,
                content: newContent,
              });
              setEditMode(false);
            }}

...сделать:

const newProjectHandler = (e)=>{
  e.preventDefault();
  props.addProject(props.userId, {
     name: newName,
     content: newContent,
   });
   setEditMode(false);
}
...
<form 
  onSubmit = { newProjectHandler }
>
...
</form>

Ну и чтобы каждый раз не обращаться props.someProps можно сделать немножко удобнее и воспользоваться деструктуризацией:

const  AddProject = ({ addProject, userId }) =>  {
...
}

Как-то так. Но не принимайте за панацею, могу ошибаться местами.
Успехов вам.

[Zhanna_K]

8XL, Большое спасибо за ревью, буду рефакторить! Сама вижу, что код уже нечитаем)

Answer 1

[Zhanna_K]

Нашла такую штуку.
Если вы, как и я используете библиотеку Material UI, то у нее есть компонент

<ClickAwayListener onClickAway={handleClose}> </ClickAwayListener>

который позволяет слушать клики вне компонента.

Comments

[dragndroper]

Я зашел сюда, чтобы сказать СПАСИБО.
На v4 работает.

Answer 2

[8XL]

React.useEffect(()=>{
  document.addEventListener('onmousedown', handleClick)
    return()=> document.removeEventListener('onmousedown', handleClick)
}, [])

Объяснение:

React.useEffect(()=>{
//вешаем листенер
  document.addEventListener('onmousedown', handleClick) 
// в зависимости хука заносим пустой массив. Таким образом мы с помощью хука выполним метод
 //componentDidMount(), вызвав useEffect 1 раз
}, [])

React.useEffect(()=>{
...какой-то код...
//удаляем листенер
 return ()=> document.removeEventListener('onmousedown', handleClick)
//после return прописываем методы, которые нужно выполнить после при размонтировании компонента
//componentWillUnmount() аналог на хуках
}, [])

про useRef очень доступно и удобно написано в документации. Принцип такой же, как в вашем примере, только обращение к свойствам немножко иначе (refName.current...)

Comments

[Zhanna_K]

Спасибо за подробный ответ! Получилось осуществить все, что хотела)

Answer 3

[Mike]

Можете задать состояние компоненту и по клику менять состояние. В рендере показывать или убирать дочерний компонент в зависимости от состояния.

export const Foo = () = {
const [toggle, setToggle] = useState(false);

render (
<div onClick={() => setToggle(!toggle)}>Скрыть компонент</div>
{toggle ?  null : <Baz />}
)
}

Comments

[Zhanna_K]

да, это вариант, если кликать на конкретный div)
Но хочу скрыть элемент при клике в любую точку экрана, вне этого самого элемента

Answer 4

[Владимир]

На хуках вполне себе жизненный цикл реализуется https://reactjs.org/docs/hooks-reference.html#useeffect
Только не могу в голову взять при чем здесь жизненный цикл и клик вне компонента.

Comments

[Zhanna_K]

Я имела в вижу нечно подобное

export default class OutsideClick extends Component {
  constructor(props) {
    super(props);

    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  /**
   * Set the wrapper ref
   */
  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  /**
   * Alert if clicked on outside of element
   */
  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      alert('You clicked outside of me!');
    }
  }

  render() {
    return <div ref={this.setWrapperRef}>{this.props.children}</div>;
  }
}

[Zhanna_K]

Спасибо за ответ, буду разбираться с useEffect()

[Владимир]

Zhanna_K, Я понял, они слушают клики на документе в самом компоненте, да там нужен useEffect и рефы тоже в хуках есть, так что почитайте и остальные
https://reactjs.org/docs/hooks-reference.html

[Zhanna_K]

Владимир, спасибо! уже в процессе)

Answer 5

[Vetal1992]

Возможно самый простой вариант, без лишних импортов, который везде сработает:

const SomeComponent = () => {
    const shovHide = () => {
        let a = document.getElementById('text')
        if (a.style.display === 'none') {
            a.style.display = 'block'
        } else if (a.style.display === 'block') {
            a.style.display = 'none'
        }
    }

    return (
        <div>
            <button onClick={shovHide}>
                push to shov\hide
            </button>
            <a id='text' style={{ display: 'none', fontSize: '1vw' }} href="">some text some text</a>
        </div>
    )
}

export default SomeComponent;