Html 使按钮不可见单击并显示另一个按钮

当我点击一个按钮并显示另一个按钮时，如何使它在ReactJS中不可见

  <button className ="btn" id="btnn"  onClick={this.onClick} >Ask a question </button>

维持一种状态：

this.state = { invisible: false }

那么

试试这个：

class Test extends Component {
  constructor(propss) {
    super(propss);
    this.state = {
      hide: false,
      disable: false
    };
    this.toggleButton = this.toggleButton.bind(this);
    this.disableButton = this.disableButton.bind(this);
  }

  toggleButton(value) {
    this.setState({ hide: value });
  }
  disableButton() {
    this.setState({ disable: true });
  }
  render() {
    return (
      <div>
        {!this.state.hide && 
          <button onClick={() => this.toggleButton(true)}>Hide</button>
        }
        <button onClick={this.disableButton} disabled={this.state.disable}>
          disable
        </button>

      {(this.state.hide || this.state.disable) && (
      <button style={{ background: "green", color: "white" }}>
        New button
      </button>
    )}
      </div>
    );
  }
}

---

只需创建一个状态，控制按钮是否显示。如果状态为true，则可以使用条件呈现

   Something like ....


        Import React from 'react'

        class MyComponent extends React.Component ()
        {
        this.state {
        isClicked: false
        }

        this.setState(isClicked: true)
        render() {
          {isClicked} = this.state  
        return (
        // your code here

        {!isClicked &&
         <button className ="btn" id="btnn" onClick={this.onClick}> Ask a 
         question </button>
        } // will only display the button if the state is false, else if 
          state is true, it will not 
        );
        }}

---

隐藏还是禁用？你想完成哪一个？@NishantDixit你能告诉我两种方法都有效吗！但是，当我点击我想要隐藏/禁用的按钮时，我怎么能让另一个按钮出现呢？我认为上面的代码完全满足了你的要求？或者需要其他东西吗？问题是上面的代码没有显示一个新的按钮，一旦我点击隐藏按钮，例如。更新！现在检查。你能给我看一下你用的链接代码而不是按钮吗？

onClick= function() {
    this.setState({ invisible: !this.state.invisible })
} 

class Test extends Component {
  constructor(propss) {
    super(propss);
    this.state = {
      hide: false,
      disable: false
    };
    this.toggleButton = this.toggleButton.bind(this);
    this.disableButton = this.disableButton.bind(this);
  }

  toggleButton(value) {
    this.setState({ hide: value });
  }
  disableButton() {
    this.setState({ disable: true });
  }
  render() {
    return (
      <div>
        {!this.state.hide && 
          <button onClick={() => this.toggleButton(true)}>Hide</button>
        }
        <button onClick={this.disableButton} disabled={this.state.disable}>
          disable
        </button>

      {(this.state.hide || this.state.disable) && (
      <button style={{ background: "green", color: "white" }}>
        New button
      </button>
    )}
      </div>
    );
  }
}

   Something like ....


        Import React from 'react'

        class MyComponent extends React.Component ()
        {
        this.state {
        isClicked: false
        }

        this.setState(isClicked: true)
        render() {
          {isClicked} = this.state  
        return (
        // your code here

        {!isClicked &&
         <button className ="btn" id="btnn" onClick={this.onClick}> Ask a 
         question </button>
        } // will only display the button if the state is false, else if 
          state is true, it will not 
        );
        }}