听div的反应

Question

我有一种情况，用户可以在我的React Web应用程序中关闭页面，并且如果要进行更改，我想显示一个弹出窗口“确定要关闭页面”。 需要明确的是，我不是在谈论网络浏览器页面，而是我的应用程序中的页面/选项卡。

一切都已设置完毕，并可以使用按钮来模拟更改。 问题是我只是想找到一种方法来监听整个div（如果DOM发生了变化），以便不对这个div的每个输入进行操作。 如果有人知道这样做的好方法，我将很高兴听到它。 提前致谢。

（我使用js库lodash，但没有找到任何对我有帮助的东西，但也许我通过得太快了）。

div的EDIT示例：

<div>
    <input value="Bob">
    <input value="Brian">
    <input value="Anna">
</div>

我想知道用户何时更改输入

Answer 1

我会在您关心的每个输入上添加一个on change处理程序，以在每次输入更改时更新主组件状态，然后，当用户想要关闭窗口时，只需检查该状态即可。 像这样：

class Component extends React.Component {
  constructor(props){
    super(props)
    this.state ={ inputsChanged: false}
    this.handleChange = this.handleChange.bind(this)
    this.onLeaveCheck = this.onLeaveCheck.bind(this)
  }

  handleChange(){
   if(!this.state.inputsChanged){this.setState({inputsChanged: true})}
  }

  onLeaveCheck(){
   this.state.inputsChanged && window.alert('Are you sure you want to 
   leave)
  }

  render(){
    <div>
     <button onClick={this.onLeaveCheck} >X</button>
     <input  onChange={this.handleChange} />
     <input  onChange={this.handleChange} />
     <input  onChange={this.handleChange} />
    </div>
  }
}

您的另一个选择是设置一个间隔，该函数将通过id（或任何其他选择器）获取所有输入，并不断检查它们的值是否发生更改，以及如果它们确实发生了更改，请像上面一样更新组件状态。 如果您要使用此路线，请不要忘记删除componentWillUnmount上的间隔。

Answer 2

如果您正在寻找鼠标离开事件，则可以使用以下方法：

class Component extends React.Component {
  constructor(props){
      super(props)
  }

  mouseLeave(){
       // your logic here
  }

  render(){
    <div  onMouseLeave={this.mouseLeave}>
      <input value="Bob">
      <input value="Brian">
      <input value="Anna">
    </div>
  }
}