时间戳

首页 > 解决方案 > 如何在 reactjs 中隐藏按钮。点击按钮隐藏

javascript - 如何在 reactjs 中隐藏按钮。点击按钮隐藏

问题描述

在此处输入图像描述

请帮助单击按钮在类组件中使用 reactJs 完成隐藏

请检查图像并提供更正的代码

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

export default class ButtonDemo extends Component {

  constructor(props) {
      super(props)
      this.state = {
        isDisabled: false 
      }
  }
  handSubmit(){
    this.setState({
      isDisabled: true
  })
  }
      render() {
        return (
    <div>
      <input></input>
      <button disabled={this.state.isDisabled} onClick={() => this.handSubmit()}>submit</button>
    </div>
  );
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： javascriptreactjs

解决方案

这应该可以解决问题：

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

export default class ButtonDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisabled: false,
    };
  }
  handSubmit() {
    this.setState({
      isDisabled: true,
    });
  }
  render() {
    const buttonStyling = this.state.isDisabled ? {display: "none;"} : {};

    return (
      <div>
        <input></input>
        <button style={buttonStyling} disabled={this.state.isDisabled} onClick={() => this.handSubmit()}>
          submit
        </button>
      </div>
    );
  }
}

另一种可能的解决方案是为按钮实现条件渲染：

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

export default class ButtonDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisabled: false,
    };
  }
  handSubmit() {
    this.setState({
      isDisabled: true,
    });
  }
  render() {
   

    return (
      <div>
        <input></input>
         {!this.state.isDisabled &&
        (<button disabled={this.state.isDisabled} onClick={() => this.handSubmit()}>
          submit
        </button>)}
      </div>
    );
  }
}

推荐阅读