Question

我想在页面上任何要取消突出显示相同元素的地方突出显示单击和单击事件释放时的元素：

代码：

    class Hello extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeState: false
    };
  }
onmouseup() {
    this.setState({active: false});
}
onClick() {
    this.setState({active:true});
}
  render() {
  const bgcolor = this.state.active ? "#e9e9e9" :""
    return <div>
    <span style={{backgroundColor: bgcolor}}onClick={this.onClick.bind(this)} onMouseUp={this.onmouseup.bind(this)}>helo world</span>
    {this.state.active &&
    <select><option>A</option><option>B</option></select>}
    </div>
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

但是由于某些原因，我没有得到释放鼠标单击时将触发的事件。我尝试过：onMouseUp, onBlur

有什么想法吗？

Answer 1

我从来没有发现仅使用React来实现此目的的好方法，因此我不再使用香草JS事件监听器。

document.body.addEventListener('click', this.handleBodyClick);

这将侦听对主体的单击，并会触发将活动状态设置为false的功能。

这里正在起作用：https://jsfiddle.net/sq2ajn8o/30/

如果要在单击时激活活动状态，则应使用执行以下操作的函数：

handleClick() {
  const { activeState } = this.state;
  this.setState({ activeState: !activeState });
}

如果活动状态为true，它将变为false，反之亦然。

什么事件会触发点击释放-Javascript / Reactjs

1 个答案: