如何在react中隐藏按钮.单击按钮隐藏

Question

输入图片描述

请帮助单击按钮完成隐藏使用类组件中的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>

Answer 1

这应该能奏效:

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

Answer 2

检查下面的代码。你应该使用条件呈现，这将隐藏元素(从DOM中删除)

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 onClick= {()=>this.handSubmit()}>
submit
</button>) }
</div>
);
}
}