React的一个bug（暂且当它是bug吧）

Posted 2020-12-25 zheng-chuang

先看代码（不知何故的）

import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
  constructor(props){
    super(props)
    this.onClick1 = this.onClick1.bind(this);
    this.onClick2 = this.onClick2.bind(this)
  }
  onClick1() {
    alert(‘被点击了‘)
  }
  onClick2() {
    this.btn1.disabled = false
  }
  render() {
    return(
      <div>
        <button ref={node => this.btn1 = node} disabled onClick={this.onClick1}>按钮一</button>
        <button onClick={this.onClick2}>按钮二</button>
      </div>
    )
  }
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));

按钮一先是被禁用，然后通过按钮二的点击事件直接操作按钮一的ref对象将其解除禁用，但是按钮一上绑定的事件并不能生效

产生的原因（未知）

解决办法（不通过ref操作）

正常可行方法

import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
  constructor(props){
    super(props)
    this.onClick1 = this.onClick1.bind(this);
    this.onClick2 = this.onClick2.bind(this);
    this.state = {
      disabled: true
    }
  }
  onClick1() {
    alert(‘被点击了‘)
  }
  onClick2() {
    this.setState({
      disabled: false
    })
  }
  render() {
    return(
      <div>
        <button disabled={this.state.disabled} onClick={this.onClick1}>按钮一</button>
        <button onClick={this.onClick2}>按钮二</button>
      </div>
    )
  }
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));