ReactJS中点击按钮隐藏自身并显示另一按钮的实现方法

我来帮你搞定这个问题！在React里实现这种按钮切换的需求，核心是用**组件状态（state）**来控制元素的显示与隐藏——这才是符合React数据驱动UI理念的做法，而不是直接去操作DOM元素的属性哦。

类组件实现方案（适配你现有代码的写法） #

你原来的代码看起来是类组件，那咱们就基于类组件来改造：

1. 首先在组件的构造函数里初始化一个状态，用来标记按钮是否被点击过：

constructor(props) {
  super(props);
  this.state = {
    isFirstButtonVisible: true // 初始状态下显示第一个按钮
  };
  // 别忘了绑定this，不然onClick里的this会指向不对
  this.handleButtonClick = this.handleButtonClick.bind(this);
}

2. 然后写点击事件的处理函数，用来更新状态：

handleButtonClick() {
  // 切换状态，把第一个按钮的显示状态设为false
  this.setState({ isFirstButtonVisible: false });
}

3. 最后在render方法里根据状态来条件渲染对应的按钮：

render() {
  return (
    <div>
      {this.state.isFirstButtonVisible ? (
        <button className="btn" onClick={this.handleButtonClick}>
          Ask a question
        </button>
      ) : (
        <button className="btn">
          这里是你要显示的第二个按钮内容
        </button>
      )}
    </div>
  );
}

完整的类组件示例代码：

import React from 'react';

class ButtonToggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFirstButtonVisible: true
    };
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    this.setState({ isFirstButtonVisible: false });
  }

  render() {
    return (
      <div>
        {this.state.isFirstButtonVisible ? (
          <button className="btn" onClick={this.handleButtonClick}>
            Ask a question
          </button>
        ) : (
          <button className="btn">
            比如可以写"Submit Answer"之类的内容
          </button>
        )}
      </div>
    );
  }
}

export default ButtonToggle;

函数组件+Hook实现方案（现在更常用的写法） #

如果是用React 16.8+的函数组件，咱们可以用useState Hook来简化代码：

import React, { useState } from 'react';

function ButtonToggle() {
  const [showFirstButton, setShowFirstButton] = useState(true);

  const handleClick = () => {
    setShowFirstButton(false);
  };

  return (
    <div>
      {showFirstButton ? (
        <button className="btn" onClick={handleClick}>
          Ask a question
        </button>
      ) : (
        <button className="btn">
          第二个按钮的内容
        </button>
      )}
    </div>
  );
}

export default ButtonToggle;

为什么你原来的写法不行？ #

你之前写的onClick= function() { btnn.disabled }只是尝试禁用按钮，而且直接操作DOM元素（通过id获取btnn）不符合React的设计思路——React提倡通过状态来驱动UI变化，而不是直接修改DOM。用状态管理的方式，不仅代码更清晰，还能避免很多DOM操作带来的潜在问题。

内容的提问来源于stack exchange，提问作者M.A.G