时间戳

首页 > 解决方案 > 在反应中听一个 div 变化

javascript - 在反应中听一个 div 变化

问题描述

我有一个案例，用户可以在我的 react webapp 中关闭一个页面，如果更改了“你确定要关闭页面”，我想显示一个弹出窗口。需要明确的是，我不是在谈论网络浏览器页面，而是在我的应用程序中的页面/选项卡。

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

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

div 的编辑示例：

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

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

标签： javascriptreactjs

解决方案

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

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

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

推荐阅读