我一直在尝试调用prinWhole.js的函数onCountRowsCompanies，以便可以在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;
dashboard.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);
答案 0 :(得分：0)
您可以通过在子组件上使用ref然后调用该方法来实现。但是，这不是推荐的使用React的方法。
答案 1 :(得分：0)
您可能不想这样做。我不希望这对您来说是正确的答案，但是您听说过国家管理吗？
尝试Redux，这很容易实现。
将项目与Redux集成后，请按照以下步骤操作： ，也许还有Redux-thunk / Redux-saga用于处理副作用（api调用）：
当您要调用api时，dispatch进行redux存储操作，使用Redux-thunk / Redux-saga处理api调用，并使用接收到的数据更新存储。
connect您的具有Redux的组件，Redux存储更改中的可用数据将触发对该组件的重新渲染。
我知道这会做很多工作，但是将来会为您节省更多时间。