onClick 有一个奇怪的行为答案

【问题标题】：onClick has a strange behavioronClick 有一个奇怪的行为
【发布时间】：2020-07-31 09:59:50
【问题描述】：

我遇到了一个关于 onClick 事件的问题，但首先，我将解释一下行为：

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

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

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

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

【问题讨论】：

标签： javascript html reactjs event-handling dom-events

【解决方案1】：

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

在下面的示例中，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>

【讨论】：