Блог

У меня есть дочерний компонент, который должен закрываться, когда пользователь нажимает за пределами функции. Я могу обнаружить щелчок снаружи, используя библиотеку onclickoustide, но проблема в том, что я не хочу, чтобы состояние компонента менялось, если компонент уже исчез. Вот почему я проверил, что такое отображение css. Все это можно увидеть в методе handleClickOutside. Вместо того, чтобы менять дисплей, я сделал консоль.войдите в журнал, чтобы узнать, работает ли он. Мой код выглядит так:

 import React, { useState, useEffect } from 'react';
import onClickOutside from 'react-onclickoutside';

function TaskOptions({ display, changeState }) {
    const [styleDisplay, setDisplay] = useState(display);

    useEffect(() => {
        setDisplay(display);
    }, [display])

    TaskOptions.handleClickOutside = () => {
        if(display === "initial") {
            console.log('hi')
        }

        console.log(display)
    }


    

    return (
        <div 
            className="card"
            style={{
                display: styleDisplay
            }}
        >
            <div className="btn-group">
                <button className="btn btn-light" onClick={() => console.log(display)}>Edit</button>
                <button className="btn btn-light">Duplicate</button>
                <button className="btn btn-light">Delete</button>
            </div>
        </div>
    );
}

const clickOutsideConfig = {
    handleClickOutside: () => TaskOptions.handleClickOutside
};

export default onClickOutside(TaskOptions, clickOutsideConfig);
 

Что должно произойти, так это то, что консоль должна печатать «привет», когда я нажимаю за пределами элемента. Однако он выводит только значение опоры дисплея. Этот реквизит дисплея не определен. Однако, если вы перейдете к кнопке редактирования, она также отобразится при нажатии на нее, однако значения будут совершенно другими. Внешний щелчок выводит неопределенное значение, в то время как кнопка выводит истинное отображаемое значение.

TaskOptions.handleClickOutside Функция должна сформировать замыкание вокруг аргумента отображения, тогда вы правильно зафиксируете значение:

 TaskOptions.handleClickOutside = () => {
    if(display === "initial") {
        console.log('hi')
    }

    console.log(display) // Changed from TaskOptions.display
}
 

Вот рабочий пример: https://codesandbox.io/s/trusting-turing-vplp2?file=/src/App.js