Question

第一次单击后，模态显示。在其外部单击后，将其删除。但是，尽管该按钮不是模式的子级，但其onClick无法更新this.state.changed并删除div。为什么？ Codepen：https://codepen.io/Matt-dc/pen/KJYxqv

class Modal extends React.Component {
   setWrapperRef = (node) => {
      this.wrapperRef = node;
   }

componentWillMount = () => {
    document.addEventListener('mouseup', this.handleClickOutside);
}

componentDidMount = () => {
    document.addEventListener('mouseup', this.handleClickOutside);
}

handleClickOutside = (e) => {
  if (this.wrapperRef && !this.wrapperRef.contains(e.target)) {
      this.props.close()
  }
}


render() {
   if(!this.props.changed) {
      return null
 }
 return(
     <div id="modal">
        <div
            id="ref"
            style={myDiv}
            ref={this.setWrapperRef}
            >
            {this.props.children}
        </div>
    </div>
    ); 
  }
}


export default class App extends React.Component {

   constructor(props) {
   super(props);
   this.state = {
      changed: false,
   }
   this.handleChange = this.handleChange.bind(this);
}

handleChange = () => {
  this.setState({
    changed: !this.state.changed,
   });
}


render(){
  return(
     <div id="app">
        <input type="button" value="show" onClick={this.handleChange} />

        <Modal changed={this.state.changed} close={this.handleChange} />
   </div>

Answer 1

这是因为您的document.addEventListener('mouseup', this.handleClickOutside)组件中有Modal。尝试通过评论-

document.addEventListener('mouseup', this.handleClickOutside)，它将起作用。

如果您可以在调试时渲染{this.state.changed.toString（）}以获得更多详细信息，那就更好了：）

Answer 2

它看起来好像没有在单击按钮时关闭，但实际上它确实关闭了模态，然后再次更改它，因为handleChange函数被触发了两次。

问题出在您的handleClickOutside逻辑上，该逻辑触发了handleChange函数（通过close道具传递）：

<Modal changed={this.state.changed} close={this.handleChange} />

您要单击的按钮在模式之外-这就是再次触发它的原因。

为什么onClick只在第一次使用？

2 个答案: