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

enter image description here

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上调用主对象

您拥有

free

因此像

一样使用

export var home = new Home()

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

从按钮onclick调用功能无法正常工作js

4 个答案: