Question

一旦我点击它并显示另一个按钮，我如何在ReactJS中创建一个不可见按钮

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

这是我尝试执行禁用它的onclick功能

onClick= function() {
    btnn.disabled
}

Answer 1

试试这个：）

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

Answer 2

维持一个州：

this.state = { invisible: false }

然后，

<button
    style={this.state.invisible ? {display:"none"} : {}} 
    className ="btn" id="btnn"  onClick={this.onClick.bind(this)} >Ask a question 
</button>
<button
    style={!this.state.invisible ? {display:"none"} : {}} 
    className ="btn" id="btnn"  onClick={this.onClick.bind(this)} >Other Button 
</button>

和

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

Answer 3

只需创建一个状态，即控制您的按钮是否显示。如果状态为真，你可以使用条件渲染。

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

使按钮不可见onClick并显示另一个按钮

3 个答案: