默认禁用按钮单击事件不会在 reactjs 上触发

Question

我有默认情况下被禁用的按钮。但是当复选框被选中时，按钮将被启用，使用 ref 我启用按钮。按钮激活后，单击事件不会触发。如果没有默认禁用，按钮的点击事件就会被触发。

    class TodoApp extends React.Component {

        onChangeCheckBox(event) {
            if(event.target.checked) {
                this.actionButtonRef.disabled = "";
            }
            else {
                this.actionButtonRef.disabled = "disabled";

            }
        }  

        render() {
            return (
            <div>
                <input 
                    type="checkbox" 
                    ref={element => {
                        this.checkboxAllRef = element;
                    }}
                    onChange={event => this.onChangeCheckBox(event)}/> Checbox 
                <br />
                <button
                    type="button"
                    className="btn btn-danger" 
                    ref={element => {
                        this.actionButtonRef = element;
                    }}
                    onClick={event => {
                        alert("clicked");
                    }} 
                    disabled="disabled">Button</button>
            </div>
            )
        }
    }

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

这是jsfiddle

Answer 1

试试这个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。

应谨慎使用参考文献 另请参阅此答案以获取禁用按钮的最佳实践 how-to-disable-button-in-react-js