как сделать так, чтобы кнопка исчезла при нажатии другой кнопки?

Question

У меня проблема с переключением появления кнопки в моем реактивном проекте.

Я работаю над мини-реактивным проектом.Я хочу, чтобы моя кнопка показа переключала внешний вид другой кнопки со значением «submit», используя Reaction / 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

это может вам помочь.Прочитайте комментарий в коде, чтобы понять больше.с другой стороны, вам не нужно объявлять переменную и тип ее данных, чтобы использовать ее.

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;

Answer 2

Ваш условный рендеринг хорош, проблема возникает, когда вы обновляете свое состояние show, поэтому в вашей функции handleShow внесите небольшое изменение

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

Plus, измените тип отправки шоукнопка для ввода кнопки.Это сделает свое дело.