从按钮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> ); } }