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"))

here is jsfiddle

Answer 1

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>
    );
  }
}

这是demo。

Answer 2

试试这个JSfiddle link

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中过度使用ref。

Refs应该谨慎使用另请参阅此答案，了解禁用按钮how-to-disable-button-in-react-js

的最佳做法

Answer 3

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

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

另一方面，通常认为最好的做法是尽可能少地使用refs，通过使用state在true和false之间切换，你可以获得类似的，更理想的结果

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

3 个答案: