Javascript 防止在React中设置状态触发器

我有：

class SomeComponent扩展组件{
状态={
外部：错误，
里面:假,，
}
onOutsideClick=（）=>this.setState（{outside:true}）
onInsideClick=（）=>this.setState（{inside:true}）
render（）{
返回（一些文本，
一些其他文本
）
}
}

在调用setState之前检查一些布尔值，并在setState回调中将其再次设为false。

您应该使用

事件.stopPropagation（）

停止冒泡事件。很难说为什么

stopPropagation（）

对您不起作用

使用

停止播放（）

进行演示：

import React，{Component}来自'React'；
从'react dom'导入{render}；
const INSIDE_CLICK='INSIDE'；
const OUTSIDE_CLICK='OUTSIDE'；
类应用程序扩展组件{
状态={
单击：未定义，
};
onOutsideClick=（）=>{
this.setState（{clicked:OUTSIDE_CLICK}）；
};
onInsideClick=（事件）=>{
event.stopPropagation（）；
this.setState（{clicked:INSIDE_CLICK}）；
};
render（）{
返回(
一些文本，
一些其他文本
单击：{this.state.Clicked}
);
}
}
render（，document.getElementById（'root'））；

import React, { Component } from 'react';
import { render } from 'react-dom';

const INSIDE_CLICK = 'inside';
const OUTSIDE_CLICK = 'outside';

class App extends Component {
  state = {
    clicked: undefined,
  };

  onOutsideClick = () => {
    this.setState({ clicked: OUTSIDE_CLICK });
  };

  onInsideClick = (event) => {
    event.stopPropagation();
    this.setState({ clicked: INSIDE_CLICK });
  };

  render() {
    return (
      <div onClick={this.onOutsideClick}>
        Some text, <p onClick={this.onInsideClick}>some other text</p>
        <div style={{ border: '2px solid red' }}>
          Clicked: {this.state.clicked}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));