Вызов функции из кнопки onclick не работает реагировать JS

Question

Я новичок в javascript и пытаюсь понять это.Я пытаюсь, чтобы структура div в renderNewCard () появлялась на странице каждый раз, когда вы нажимаете кнопку.Кнопка, кажется, работает, когда я вызываю функцию только с предупреждением, но она ничего не делает, когда я вызываю этот метод и пытаюсь вывести структуру div.Я приложил изображение того, как выглядит структура div и что нужно добавить при нажатии кнопки.При рендере не беспокойтесь о полях и методах аутентификации, которые работают нормально.У меня проблемы с кнопкой, производящей вывод, который я хочу вызвать из функции со структурой div.Я мог бы что-то упустить, но не совсем уверен.Любая помощь / совет приветствуется.

.Home .newObjects {
  height: 130px;
  padding-top: 81px;
}

.Home .newObjects button {
  border-width: 2px;
  border-color: rgb(98, 98, 98);
  border-style: solid;
  border-radius: 6px;
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.18);
  width: 72px;
  height: 100%;
  margin-left: 72%;
  font-weight: bold;

}
.Home .newObjects button:focus {
  outline: none;
}
.card {
  min-height: 310px;

}

.scroll-box {
  overflow-y: scroll;
  height: 310px;
  padding: 1rem;

}

.card-border{
 border-style: solid;
  border-width: 2px;
  margin-top: 50px;
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.18);
}

import React, {Component} from "react";
import "./Home.css";
import {ControlLabel, FormControl, FormGroup} from "react-bootstrap";



export default class Home extends Component {


  renderNewObjectsButton() {

    return (
        <div className="newObjects">
            <button onClick={()=>this.renderNewCard()}>New</button>


        </div>
    )

  }


  render() {
    return (
        <div className="Home">
          {this.props.isAuthenticated ? [this.renderNewObjectsButton()]
              : this.renderLander() }

        </div>
    );
  }

renderNewCard(){
    


        return(
            <div className="row" id="container">
                <div className="card-border" >
                    <div className="card">
                        <div className="card-body">
                            <a href="#" className="btn-customer">Customer</a>
                        </div>
                        <div className="card-body">
                            <a href="#" className="btn-vehicle">Vehicle</a>
                        </div>
                        <div className="card-body">
                            <a href="#" className="btn-transaction">Transaction</a>
                        </div>
                    </div>
                </div>
            </div>


            );


     }

}

введите описание изображения здесь

Answer 1

Каждый компонент реагирования имеет один метод рендеринга и будет отображать только то, что возвращается этим методом.И способ повлиять на метод рендеринга - изменить реквизит или состояние компонента.

Вам нужна переменная, хранящаяся в состоянии компонента, например:

import React, {Component} from "react";
import "./Home.css";
import {ControlLabel, FormControl, FormGroup} from "react-bootstrap";


export default class NewObjectsButton extends Component {
   render() {
     return (
       <div className="newObjects">
         <button onClick={this.props.renderNewCard}>New</button>
       </div>
     )
   }
}

export default class NewCard extends Component {
   render() {
     return(
       <div className="row" id="container">
         <div className="card-border" >
           <div className="card">
             <div className="card-body">
               <a href="#" className="btn-customer">Customer</a>
             </div>
             <div className="card-body">
               <a href="#" className="btn-vehicle">Vehicle</a>
             </div>
             <div className="card-body">
               <a href="#" className="btn-transaction">Transaction</a>
             </div>
           </div>
         </div>
       </div>
     );
   }
}

export default class Home extends Component {
  state = {
    shouldRenderNewCard: false,
  };

  renderNewCard() {
    this.setState({ shouldRenderNewCard: true });
  };

  render() {
    return (
        <div className="Home">
          {this.props.isAuthenticated ? <NewObjectsButton renderNewCard={this.renderNewCard} />
              : this.renderLander() }
          {this.state.shouldRenderNewCard ? <NewCard /> : null}
        </div>
    );
  }
}

Answer 2

 <button onClick={() => { this.setState({ show: true })}}>{this.state.show &&this.renderNewCard()}</button>

Answer 3

Перейдите по этой https://medium.com/@johnwolfe820/rendering-components-in-onclick-events-in-react-bc0d7b54e1cd ссылке.Это просто установка значения для визуализации на основе условий.Надеюсь, что это послужит вашей цели.

Answer 4

вызов вашего домашнего объекта внутри кнопки onclick

у вас есть что-то вроде

export var home = new Home()

, поэтому используйте это как

<button onClick={()=>home.renderNewCard()}>New</button>