reactjs - reactjs中如何调用一个组件到另一个组件的函数?
问题描述
我一直在尝试调用onCountRowsCompanies
prinWhole.js 的这个函数,以便我可以在 dashboard.js 中显示公司的数量,但不能。有人可以帮我吗?
printWhole.js
import React, { Component } from "react";
import axios from "axios";
import Logo from "../../common/logo";
import {Link} from "react-router-dom";
import "../style.css";
class printWhole extends Component {
constructor(props) {
super(props);
this.state = { company: [] };
this.onPrint = this.onPrint.bind(this);
this.onCountRowsCompanies = this.onCountRowsCompanies.bind(this);
}
componentDidMount() {
axios
.get("http://localhost:4000/api/company")
.then(response => {
this.setState({ company: response.data });
})
.catch(function(error) {
console.log(error);
});
}
componentDidUpdate() {
axios
.get("http://localhost:4000/api/company")
.then(response => {
this.setState({ company: response.data });
})
.catch(function(error) {
console.log(error);
});
}
onPrint = e => {
e.preventDefault();
document.getElementById("hide").style.visibility="hidden";
window.print();
document.getElementById("hide").style.visibility="visible";
};
/**This is the function onCountRowsCompanies that I want to call in Dashboard.js to display the number of companies**/
onCountRowsCompanies = e => {
e.preventDefault();
var totalRowCount = 0;
var rowCount = 0;
var table = document.getElementById("css-serial");
var rows = document.getElementsByTagName("tr");
for( var i = 0; i < rows.length; i++){
totalRowCount++;
if(rows[i].getElementsByTagName("td").length > 0){
rowCount++;
}
}
let message = "Total number of companies so far " + rowCount;
//alert(message);
document.getElementById("displayMessage").innerHTML = message;
};
render() {
const company = this.state.company;
return (
<div className="mt-5 mb-5">
<button className="btn btn-info ml-5" onClick={this.onPrint} id="printButton">
Print
</button>
<Link
to="/api/company"
className="btn btn-dark"
style={{ marginLeft: "75%" }}
id="hide"
>
Back to List
</Link>
<div className="mt-4 mb-4 p-3" style={{ border: "1px solid black"}}>
<Logo/>
<h4 align="center" style={{ marginTop: "20px" }}>
Company List
</h4>
<table className="table table-bordered mb-4 mt-4 text-center" id="css-serial">
<tbody>
<tr>
<th>No</th>
<th>Company Name</th>
<th>Contact Person</th>
<th>Contact Number</th>
<th>Alternate Contact Number</th>
<th>Email</th>
<th>Fax</th>
<th>Address</th>
</tr>
{company.map(
({
_id,
companyname,
contactperson,
contactno,
alternatecontactno,
email,
fax,
address
}) => (
<tr key={company._id}>
<td></td>
<td>{companyname}</td>
<td>{contactperson}</td>
<td>{contactno}</td>
<td>{alternatecontactno}</td>
<td>{email}</td>
<td>{fax}</td>
<td>{address}</td>
</tr>
)
)}
</tbody>
</table>
<button className="btn btn-primary" onClick={this.onCountRowsCompanies}>Result</button>
<div id="displayMessage" className="mt-4 mb-4"></div>
<p className="text-center">Copyright © {new Date().getFullYear()} Nice Infotech</p>
</div>
</div>
);
}
}
export default printWhole;
仪表板.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getCurrentProfile, deleteAccount } from "../../actions/profileActions";
import Spinner from "../common/Spinner";
import ProfileActions from "./ProfileActions";
// import Experience from "./Experience";
// import Education from "./Education";
import "../css/Dashboard.css";
// import { onCountRowsCompanies } from "../master/company/printwhole";
class Dashboard extends Component {
componentDidMount() {
this.props.getCurrentProfile();
}
onDeleteClick(e) {
this.props.deleteAccount();
}
render() {
const { user } = this.props.auth;
const { profile, loading } = this.props.profile;
let dashboardContent;
if (profile === null || loading) {
dashboardContent = <Spinner />;
} else {
// Check if logged in user has profile data
if (Object.keys(profile).length > 0) {
dashboardContent = (
<div>
{/** This is where I want to display the number of Companies */}
</div>
);
} else {
// User is logged in but has no profile
dashboardContent = (
<div>
<p className="lead text-muted">Welcome {user.name}</p>
<p>You have not yet setup a profile, please add some info</p>
<Link to="/create-profile" className="btn btn-lg btn-info">
Create Profile
</Link>
</div>
);
}
}
return <div>{dashboardContent}</div>;
}
}
Dashboard.propTypes = {
getCurrentProfile: PropTypes.func.isRequired,
deleteAccount: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
profile: state.profile,
auth: state.auth
});
export default connect(
mapStateToProps,
{ getCurrentProfile, deleteAccount}
)(Dashboard);
解决方案
您可以通过使用ref
子组件然后调用该方法来做到这一点。但是,这不是使用 React 的推荐方式。
推荐阅读
- python - 多处理以加快python中的执行时间
- javascript - 投票史诗行为
- python - 了解列表与系列中的 Python 语法
- amazon-web-services - CodenameOne 移动应用程序使用真实证书(非自签名)连接到 https 服务器时抛出 SSL 异常
- git - 合并时 Git 似乎使用不正确的祖先作为基础
- swift - 如何找到与 x [Swift] 差异最小的字典值
- sql - 使用 azure data studio 导入 csv 文件无法正常工作
- javascript - 如何将 SSO 页面(MSAL 身份验证)login.aspx(单个页面,不在母版页下)重定向到另一个页面 Home.aspx(母版页中的内容)?
- angular - 如何在 Angular DatePipe 月份缩写中不显示期间
- excel - 在 With 块内的另一张工作表中搜索引用时出现错误