Question

我有一个案例，用户可以在我的反应webapp中关闭一个页面，如果已经进行了更改，我想显示一个弹出窗口＆＃34;你确定要关闭页面＆＃34;。要明确我不是在谈论网页浏览器页面，而是在我的应用程序中的页面/标签。

所有内容都已设置并使用按钮模拟更改。问题是我只是想找到一种方法来监听整个div，如果它有DOM的变化，以便不在这个div的每个输入中放置一个动作。如果有人知道这样做的好方法，我会很高兴听到它。提前谢谢。

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

EDIT div的例子：

export const gauge = Vue.component('gauge', {
    data: function () {
        return {
        }
    },
    props: ['message'],

    template: template,

});

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

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>
  }
}

听取反应中的改变

2 个答案: