React 不允许手动更改 DOM 元素（实际上是说虚拟 DOM）。

您需要保持启用或禁用状态。并根据状态变化工作：

类构造函数：

  constructor(props) {
    super(props);

    this.state = {
      checked: false
    };

    this.onChangeCheckBox = this.onChangeCheckBox.bind(this);
    this.onClickButton = this.onClickButton.bind(this);
  }

事件处理程序：

  onChangeCheckBox(e) {
    this.setState({
      checked: e.target.checked,
    });
  }
  onClickButton(e) {
    alert(e);
  }

渲染 JSX：

  render() {
    return (
      <div>
        <input
          type="checkbox"
          checked={this.state.checked}
          onChange={this.onChangeCheckBox}
        />
        <button
          type="button"
          disabled={!this.state.checked}
          onClick={this.onClickButton}>Click</button>
      </div>
    );
  }
}

这是一个演示。

试试这个JSfiddle 链接

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      //Set initial state here
      btnDisabled: true
    };
  }
  onChangeCheckBox(event) {
    if (event.target.checked) {
      this.setState({ btnDisabled: false }); //Set new state here
    } else {
      this.setState({ btnDisabled: true });  //Set new state here
    }
  }
  render() {
    return (
      <div>
        <input
          type="checkbox"
          onChange={event => this.onChangeCheckBox(event)}
        />{" "}
        Checbox
        <div>
          <button
            type="button"
            className="btn btn-danger"
            onClick={event => {
              alert("clicked");
            }}
            disabled={this.state.btnDisabled}  //Always use state 
          >
            Button
          </button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"));

您的组件没有重新渲染，因为您没有在单击复选框时调用 setstate。单击复选框时，您需要调用 setState 并将btnDisabled设置为false。

当 setState 发生时，reactjs 重新渲染组件。这样做时，它将启用按钮。

你不应该在 React 中过度使用 refs。

应谨慎使用 Refs 另请参阅此答案以了解禁用按钮how-to-disable-button-in-react-js 的最佳实践

您应该尝试使用值true或false作为disabled按钮上属性的值而不是disabled和""

如果这些设置不正确，按钮将无法在禁用和不正确之间切换，因此您将无法执行点击事件。

在旁注中，尽可能少地使用 refs 通常被认为是最佳实践，您可以通过使用 state 在 true 和 false 之间切换来获得类似的、更理想的结果