如何在React类组件中实现点击按钮后完全隐藏该按钮

问题原因 #

你当前代码中仅通过disabled属性控制按钮状态，该属性的作用仅为禁用按钮的交互能力，不会改变按钮的可见性，因此无法实现点击后完全隐藏的需求。

修正方案 #

这里提供两种常用实现方式，可根据实际业务场景选择： #

方案1：条件渲染（点击后直接从DOM移除按钮，不占用页面空间）

适合点击后按钮不需要再显示的场景，修改后的代码如下：

import React,{Component} from "react";
import "./style.css";

export default class ButtonDemo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isButtonHidden: false 
    }
    // 提前绑定this避免箭头函数每次渲染生成新实例，也可保留原写法的箭头函数
    this.handSubmit = this.handSubmit.bind(this)
  }
  handSubmit(){
    this.setState({
      isButtonHidden: true
    })
  }
  render() {
    return (
      <div>
        <input />
        {/* 只有isButtonHidden为false时才渲染按钮 */}
        {!this.state.isButtonHidden && <button onClick={this.handSubmit}>submit</button>}
      </div>
    );
  }
}

方案2：样式控制隐藏（保留DOM节点，仅视觉上不可见）

适合后续还需要重新显示按钮的场景，可避免频繁创建销毁DOM节点：

import React,{Component} from "react";
import "./style.css";

export default class ButtonDemo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isButtonHidden: false 
    }
    this.handSubmit = this.handSubmit.bind(this)
  }
  handSubmit(){
    this.setState({
      isButtonHidden: true
    })
  }
  render() {
    return (
      <div>
        <input />
        <button 
          style={{display: this.state.isButtonHidden ? 'none' : 'block'}}
          onClick={this.handSubmit}
        >
          submit
        </button>
      </div>
    );
  }
}

如果需要保留按钮占用的位置只是看不到，可以把display: none替换为visibility: hidden即可。

内容的提问来源于stack exchange，提问作者Sudharson