從按鈕onclick調用函數不起作用反應js

Question

我是javascript新手，並試圖弄清楚這一點。 我試圖每次單擊按鈕時，renderNewCard（）中的div結構出現在頁面上。 當我僅調用警告消息的函數時，該按鈕似乎起作用，但是當我調用此方法並嘗試輸出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

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

Answer 2

瀏覽此https://medium.com/@johnwolfe820/rendering-components-in-onclick-events-in-react-bc0d7b54e1cd鏈接。 它只是根據條件設置要渲染的值。 希望它能達到您的目的。

Answer 3

在onclick調用內部對象

你有類似的東西

export var home = new Home()

所以像這樣使用

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

Answer 4

每個react組件都有一個render方法，並且只會渲染該方法返回的內容。 影響渲染方法的方法是通過更改道具或組件的狀態。

您需要的是一個存儲在組件狀態中的變量，例如：

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