Question

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

我正在做一个小型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;

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

2 个答案: