Ручка извне закрывается при нажатии на сам модал.По сути, не должен закрываться при нажатии где-либо, но за пределами модального - PullRequest
Новая
       11

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

2 голосов
/ 06 июня 2019

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

Я пытался использовать хуки, чтобы открывать и закрывать модальные и простообычный слушатель события click, но оба раза он закрывается при нажатии в любом месте страницы.

componentDidMount() {
    document.addEventListener('click', this.handleOutsideClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleOutsideClick);
  }

  handleOutsideClick = (e) => {
    if (this.state.showInfoModal && !this.node.contains(e.target)) this.handleInfoToggle();
    console.log(this.state.showInfoModal, e.target, this.node, 'clicked outside');
  }

  handleInfoToggle = (event) => {
    const { showInfoModal } = this.state;

    if (event) event.preventDefault();
    this.setState({ showInfoModal: !showInfoModal });
  };

renderSomething = (args) => {
 return(
   <span ref={(node) => { this.node = node; }}>
   {something === true && <span className={styles.somethingelse}> 
   <HintIcon onClick={this.handleInfoToggle} /></span>}
    <Modal visible={showInfoModal} onCancel={this.handleInfoToggle}>
     some information to show
    </Modal>
   </span>
  )
}

render() => {
  return (
   {this.renderSomething(args)}
  )
}

Не уверен, достаточно ли информации.но это сводит меня с ума.

Я также попытался добавить функцию dontCloseModal, которую кто-то предлагал: 

  dontCloseModal = (e) => {
    e.stopPropagation();
    console.log(e);
    this.setState({
      showInfoModal: true
    });
  }

 <div onClick={this.dontCloseModal}></div>

(((это обойдёт компонент <Modal/>))) 

  const refs = React.createRef(); // Setup to wrap one child
  const handleClick = (event) => {
    const isOutside = () => {
      return !refs.current.contains(event.target);
    };
    if (isOutside) {
      onClick();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);

    return function() {
      document.removeEventListener('click', handleClick);
    };
  });

  return (element, idx) => React.cloneElement(element, { ref: refs[idx] });
}

export default ClickOutside;

Попробовал использовать такой компонент как ^^ и добавить <ClickOutside onClick={this.closeInfoModal()}></ClickOutside> Но та же проблема с этим тоже закрывается при щелчке в любом месте, в том числе внутри модального

1 Ответ

0 голосов
/ 07 июня 2019

Немного поиграв с этим, кажется, вам также следует useRef здесь. Это позволит вам управлять переключением модального режима, если пользователь щелкает снаружи и внутри цели модального блока.

Есть много сложных способов достичь этого. Однако, поскольку здесь мы имеем дело с хуками, было бы лучше использовать пользовательские хуки.

Представляем useOnClick ?: 

// Custom hook for controling user clicks inside & outside
function useOnClick(ref, handler) {
    useEffect(() => {
        const listener = event => {
            // Inner Click: Do nothing if clicking ref's element or descendent elements, similar to the solution I gave in my comment stackoverflow.com/a/54633645/4490712 
            if (!ref.current || ref.current.contains(event.target)) {
                return;
            }
            // Outer Click: Do nothing if clicking wrapper ref
            if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
                return;
            }

            handler(event);
        };

        // Here we are subscribing our listener to the document
        document.addEventListener("mousedown", listener);

        return () => {
            // And unsubscribing it when we are no longer showing this component
            document.removeEventListener("mousedown", listener);
        };
    }, []); // Empty array ensures that effect is only run on mount and unmount
}

Посмотрите эту демонстрацию в CodeSandBox , чтобы вы могли увидеть, как это реализовано с помощью хуков.

Добро пожаловать в StackOverflow!

...