如何使一个按钮出现在单击另一个按钮时消失？

Question

我在我的反应项目中遇到按钮外观切换的问题。

我正在做一个迷你React项目。 我希望我的显示按钮使用react / JSX而不是CSS来切换另一个值为“提交”的按钮的外观。

import React, { Component } from 'react';
var show;
class FormComp extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show : Boolean()
    }
    this.handleshow = this.handleshow.bind(this);
  }

  handleshow() {
    this.setState ((prevState) => {
      return {
        show : !prevState.show
      }
    });
  }

  render() {
    <form onSubmit={this.handlesubmit}>
      <input type="submit" value="Show" onClick = {this.handleshow}/>

      { this.state.show ? <button>Submit</button> : null }
    </form> 
    </div>
  );
}}

export default FormComp;

我的条件渲染语句有什么问题吗？

Answer 1

您的条件渲染效果很好，当您更新show状态时就会出现问题，因此请在handleShow函数中进行一些更改

handleshow() {
this.setState ((prevState) => {
  return {
  show : !prevState.show
}});}

另外，将显示按钮的类型提交更改为类型按钮。 这样就可以了。

Answer 2

这可能对您有帮助。 阅读代码中的注释以了解更多信息。 另一方面，您不需要声明变量，也不需要使用数据类型。

 import React, { Component } from 'react'; class FormComp extends Component { constructor(props) { super(props); this.state = { show : false } this.handleshow = this.handleshow.bind(this); } handleshow() { // toggle your show state // for example if your show state is false than it will be true and if true than it will be false //exclamation mark(!) will work as not operator this.setState({show: !this.state.show); } render() { return( <div> <form onSubmit={this.handlesubmit}> <input type="submit" value="Show" onClick = {this.handleshow}/> // when your show state is true submit button will show up otherwise it will not shown up { this.state.show ? <button>Submit</button> : null } </form> </div> ) ); }} export default FormComp;