时间戳

首页 > 解决方案 > onClick 有一个奇怪的行为

javascript - onClick 有一个奇怪的行为

问题描述

我陷入了有关onClick事件的问题，但首先，我将解释这种行为：

我的应用程序中有一个搜索栏，结果列表中有一个在搜索运行时应禁用的按钮。它工作正常，但是当搜索正在运行并且我单击该禁用按钮时，似乎会将事件添加到队列中，并且当搜索完成并且按钮变为启用时，所有事件都会被触发......

我尝试从按钮onClick处理程序记录事件，例如，当按钮被禁用并单击 3 次时，在按钮启用后同时调用处理程序 3 次。而且我记录了按钮禁用状态，并且每个呼叫似乎都已启用。

当按钮被禁用时，有没有办法防止事件排队？此外，当被禁用时，我尝试在 CSS 上应用“指针事件：无”，但不起作用......

return <Button 
         className={buttonClass} 
         disabled={this.props.readonly} 
         onClick={() => console.log('isReadOnly:', this.props.readonly)}
       >BUTTON TEXT</Button>

标签： javascripthtmlreactjsevent-handlingdom-events

解决方案

您应该传递() => this.setState({readonly: true})更新 的值的回调readonly。

在下面的示例console.log中，仅在启用按钮时添加。只要按钮被禁用，就不会console.log添加新按钮。您可以<DisablableButton />使用重置按钮重置。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      readonly: false
    }
  }
  
  render() {
    return (
      <div>
        <DisablableButton disabled={this.state.readonly} handleClick={() => this.setState({readonly: true})} />
        <button onClick={() => this.setState({readonly: false})}>Reset</button>
      </div>
    )
  }
}

function DisablableButton(props) {

  const handleClick = () => {
    console.log("<DisablableButton /> clicked");
    props.handleClick(true);
  }

  return <button disabled={props.disabled} onClick={handleClick}>Disable</button>
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读