Reactjs 如何将它从React Js中的组件重定向到同一组件
我有一个名为listenerprise的组件，它负责呈现和显示数据库中的数据。在这个组件上，我调用另一个组件AddEnterprise来请求POST将数据更新到数据库中，并将其重定向到ListEnterprise组件以呈现更新的数据。数据库中的数据正在更新，但未发生重定向 基本上，我在listenerprise组件上，调用AddEnterprise组件并尝试将其重定向到listenerprise，但这并没有发生 注意：-当我尝试重定向到其他组件时，让我们说Home（“/”）。它工作得很好 任何帮助都将不胜感激 谢谢 上市公司Reactjs 如何将它从React Js中的组件重定向到同一组件,reactjs,react-router,Reactjs,React Router,我有一个名为listenerprise的组件，它负责呈现和显示数据库中的数据。在这个组件上，我调用另一个组件AddEnterprise来请求POST将数据更新到数据库中，并将其重定向到ListEnterprise组件以呈现更新的数据。数据库中的数据正在更新，但未发生重定向 基本上，我在listenerprise组件上，调用AddEnterprise组件并尝试将其重定向到listenerprise，但这并没有发生 注意：-当我尝试重定向到其他组件时，让我们说Home（“/”）。它工作得很好 任何帮
class ListEnterprises extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
enterprises: [],
message: null,
showFormMessage: false,
}
//Any method in a react component should be bound to this
this.refreshEnterprises = this.refreshEnterprises.bind(this);
}
// After all the elements of the page is rendered correctly, this method is called.
// After the markup is set on the page, this technique called by React itself to either fetch the data from An External API or perform some unique operations which need the JSX.API
// componentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render() the updated data loaded JSX. For example, we are going to fetch any data from an API then API call should be placed in this lifecycle method,
// and then we get the response, we can call the setState() method and render the element with updated data.
//React defines a component lifecycle. componentDidMount will be called as soon as the component is mounted. We are calling refreshCourses as soon as a component is mounted.
componentDidMount() {
this.refreshEnterprises();
}
_showMessage = (bool) => {
this.setState({
showFormMessage: bool
});
}
refreshEnterprises() {
EnterpriseService.retrieveAllEnterprises()
.then((response) => {
console.log(response.data);
this.setState({ enterprises: response.data, isLoading: false });
}).catch((error) => {
console.log(error);
});
}
removeEnterprise(id) {
EnterpriseService.deleteEnterprise(id)
.then((response) => {
console.log(response.data);
let updatedEnterprises = [...this.state.enterprises].filter(i => i.id !== id);
}).catch((error) => {
console.log(error);
});
}
render() {
console.log("Rendering Enterprises");
if (this.state.isLoading)
return (<div>Loading...</div>);
return (
<div key={this.props.location.pathname}>
<NavigationComponent /><br /><br />
<h3 align="center">Here are all your Enterprises</h3><br />
{this.state.message && <div class="alert alert-success">{this.state.message}</div>}
<Container>
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Enterprise</th>
<th>Industry</th>
<th>Description</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{
this.state.enterprises.map(
enterprise =>
<tr key={enterprise.id}>
<td>{enterprise.enterpriseName}</td>
<td>{enterprise.industry}</td>
<td>{enterprise.description}</td>
<td><button className="btn btn-warning" onClick={() => this.updateEnterprise(enterprise.id)} >Update</button></td>
<td><button className="btn btn-danger" onClick={() => this.removeEnterprise(enterprise.id)}>Delete</button></td>
</tr>
)
}
</tbody>
</Table>
</Container>{" "}{" "}{" "}
<div className="container">
<Button color="primary" size="lg" onClick={this._showMessage.bind(null, true)}>Add Enterprise</Button>{' '}
<Button color="secondary" size="lg" onClick={this._showMessage.bind(null, false)}>Hide</Button>{' '}
{/* {this.state.showFormMessage && (<AddEnterprise {...this.props} containerRef={ref => (this.current = ref)} />)} */}
{/* /console.log(this.props); */}
{this.state.showFormMessage && (<AddEnterprise {...this.props} />)}
</div>
<FooterComponent />
</div >
);
}
}
export default ListEnterprises;
class AddEnterprise extends Component {
emptyEnterprise = {
enterpriseName: "",
industry: "",
description: ""
};
constructor(props) {
super(props);
this.state = {
isLoading: true,
isForm: false,
enterprisePayload: this.emptyEnterprise
}
this.handleChange = this.handleChange.bind(this);
this.addEnterprise = this.addEnterprise.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
let updatedEnterprisePayload = { ...this.state.enterprisePayload };
updatedEnterprisePayload[name] = value;
this.setState({ enterprisePayload: updatedEnterprisePayload });
console.log(updatedEnterprisePayload);
}
addEnterprise(event) {
const payload = this.state.enterprisePayload;
EnterpriseService.addEnterprise(payload)
.then((response) => {
this.setState({ isLoading: false, isForm: true });
//event.peventDefault();
this.props.history.push("/enterprises");
})
.catch((error) => {
console.log(error);
});
}
render() {
if (this.state.isLoading && this.state.isForm)
return (<div>Loading...</div>);
return (
<div className="base-container">
<div className="header"><div><br />Add Enterprise</div></div>
<div className="content">
<div className="form">
<div className="form-group">
<label htmlFor="enterpriseName" for="enterpriseName">Enterprise Name</label>
<input type="text" name="enterpriseName" id="enterpriseName" placeholder="enterpriseName" onChange={this.handleChange} />
</div>
<div className="form-group">
<label htmlFor="industry" for="industry">Industry</label>
<input type="text" name="industry" id="industry" placeholder="industry" onChange={this.handleChange} />
</div>
<div className="form-group">
<label htmlFor="description" for="description">Description</label>
<input type="text" name="description" id="description" placeholder="description" onChange={this.handleChange} />
</div>
</div>
</div>
<div className="footer">
<button type="button" className="btn" onClick={this.addEnterprise}>Add</button>
</div>
</div>
);
}
}
//export default withRouter(connect(mapStateToProps)(AddEnterprise));
export default AddEnterprise;
类ListEnterprise扩展组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
企业：[]，
消息：空，
showFormMessage:false，
}
//react组件中的任何方法都应绑定到此
this.refreshEnterprises=this.refreshEnterprises.bind（this）；
}
//正确呈现页面的所有元素后，将调用此方法。
//在页面上设置标记后，React本身调用此技术，以从外部API获取数据或执行一些需要JSX.API的独特操作
//componentDidMount（）方法是一个完美的地方，在这里我们可以调用setState（）方法来更改应用程序的状态，并（）呈现加载JSX的更新数据。例如，我们要从API获取任何数据，那么API调用应该放在这个生命周期方法中，
//然后我们得到响应，我们可以调用setState（）方法并用更新的数据呈现元素。
//React定义组件生命周期。组件装载后将立即调用componentDidMount。组件装载后，我们将立即调用refreshCourses。
componentDidMount（）{
这个。刷新企业（）；
}
_showMessage=（bool）=>{
这是我的国家({
showFormMessage:bool
});
}
更新企业（）{
EnterpriseService.RetrieveAllEnterprise（）
。然后（（响应）=>{
console.log（response.data）；
this.setState（{enterprises:response.data，isLoading:false}）；
}).catch（（错误）=>{
console.log（错误）；
});
}
removeEnterprise（id）{
EnterpriseService.deleteEnterprise（id）
。然后（（响应）=>{
console.log（response.data）；
让UpdateDeterprises=[…this.state.enterprises].filter（i=>i.id！==id）；
}).catch（（错误）=>{
console.log（错误）；
});
}
render（）{
console.log（“呈现企业”）；
if（此.state.isLoading）
返回（加载…）；
返回(
这是您所有的企业
{this.state.message&&{this.state.message}
企业
工业
描述
更新
删除
{
这个是.state.enterprises.map(
企业=>
{enterprise.enterpriseName}
{企业工业}
{enterprise.description}
this.updateEnterprise（enterprise.id）}>Update
this.removeEnterprise（enterprise.id）}>Delete
)
}
{" "}{" "}{" "}
添加企业{'}
隐藏{'}
{/*{this.state.showFormMessage&（（this.current=ref）}/>）}*/}
{/*/console.log（this.props）；*/}
{this.state.showFormMessage&&（）}
);
}
}
导出默认列表企业；
class ListEnterprises extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
enterprises: [],
message: null,
showFormMessage: false,
}
//Any method in a react component should be bound to this
this.refreshEnterprises = this.refreshEnterprises.bind(this);
}
// After all the elements of the page is rendered correctly, this method is called.
// After the markup is set on the page, this technique called by React itself to either fetch the data from An External API or perform some unique operations which need the JSX.API
// componentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render() the updated data loaded JSX. For example, we are going to fetch any data from an API then API call should be placed in this lifecycle method,
// and then we get the response, we can call the setState() method and render the element with updated data.
//React defines a component lifecycle. componentDidMount will be called as soon as the component is mounted. We are calling refreshCourses as soon as a component is mounted.
componentDidMount() {
this.refreshEnterprises();
}
_showMessage = (bool) => {
this.setState({
showFormMessage: bool
});
}
refreshEnterprises() {
EnterpriseService.retrieveAllEnterprises()
.then((response) => {
console.log(response.data);
this.setState({ enterprises: response.data, isLoading: false });
}).catch((error) => {
console.log(error);
});
}
removeEnterprise(id) {
EnterpriseService.deleteEnterprise(id)
.then((response) => {
console.log(response.data);
let updatedEnterprises = [...this.state.enterprises].filter(i => i.id !== id);
}).catch((error) => {
console.log(error);
});
}
render() {
console.log("Rendering Enterprises");
if (this.state.isLoading)
return (<div>Loading...</div>);
return (
<div key={this.props.location.pathname}>
<NavigationComponent /><br /><br />
<h3 align="center">Here are all your Enterprises</h3><br />
{this.state.message && <div class="alert alert-success">{this.state.message}</div>}
<Container>
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Enterprise</th>
<th>Industry</th>
<th>Description</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{
this.state.enterprises.map(
enterprise =>
<tr key={enterprise.id}>
<td>{enterprise.enterpriseName}</td>
<td>{enterprise.industry}</td>
<td>{enterprise.description}</td>
<td><button className="btn btn-warning" onClick={() => this.updateEnterprise(enterprise.id)} >Update</button></td>
<td><button className="btn btn-danger" onClick={() => this.removeEnterprise(enterprise.id)}>Delete</button></td>
</tr>
)
}
</tbody>
</Table>
</Container>{" "}{" "}{" "}
<div className="container">
<Button color="primary" size="lg" onClick={this._showMessage.bind(null, true)}>Add Enterprise</Button>{' '}
<Button color="secondary" size="lg" onClick={this._showMessage.bind(null, false)}>Hide</Button>{' '}
{/* {this.state.showFormMessage && (<AddEnterprise {...this.props} containerRef={ref => (this.current = ref)} />)} */}
{/* /console.log(this.props); */}
{this.state.showFormMessage && (<AddEnterprise {...this.props} />)}
</div>
<FooterComponent />
</div >
);
}
}
export default ListEnterprises;
class AddEnterprise extends Component {
emptyEnterprise = {
enterpriseName: "",
industry: "",
description: ""
};
constructor(props) {
super(props);
this.state = {
isLoading: true,
isForm: false,
enterprisePayload: this.emptyEnterprise
}
this.handleChange = this.handleChange.bind(this);
this.addEnterprise = this.addEnterprise.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
let updatedEnterprisePayload = { ...this.state.enterprisePayload };
updatedEnterprisePayload[name] = value;
this.setState({ enterprisePayload: updatedEnterprisePayload });
console.log(updatedEnterprisePayload);
}
addEnterprise(event) {
const payload = this.state.enterprisePayload;
EnterpriseService.addEnterprise(payload)
.then((response) => {
this.setState({ isLoading: false, isForm: true });
//event.peventDefault();
this.props.history.push("/enterprises");
})
.catch((error) => {
console.log(error);
});
}
render() {
if (this.state.isLoading && this.state.isForm)
return (<div>Loading...</div>);
return (
<div className="base-container">
<div className="header"><div><br />Add Enterprise</div></div>
<div className="content">
<div className="form">
<div className="form-group">
<label htmlFor="enterpriseName" for="enterpriseName">Enterprise Name</label>
<input type="text" name="enterpriseName" id="enterpriseName" placeholder="enterpriseName" onChange={this.handleChange} />
</div>
<div className="form-group">
<label htmlFor="industry" for="industry">Industry</label>
<input type="text" name="industry" id="industry" placeholder="industry" onChange={this.handleChange} />
</div>
<div className="form-group">
<label htmlFor="description" for="description">Description</label>
<input type="text" name="description" id="description" placeholder="description" onChange={this.handleChange} />
</div>
</div>
</div>
<div className="footer">
<button type="button" className="btn" onClick={this.addEnterprise}>Add</button>
</div>
</div>
);
}
}
//export default withRouter(connect(mapStateToProps)(AddEnterprise));
export default AddEnterprise;
_showMessage = (bool, update=false) => {
this.setState({
showFormMessage: bool
});
if (update) {
this.refreshEnterprises();
}
}
addEnterprise(event) {
const payload = this.state.enterprisePayload;
EnterpriseService.addEnterprise(payload)
.then((response) => {
this.setState({ isLoading: false, isForm: true });
//event.peventDefault();
this.props.showMessage(false, true); // to refresh parent call
})
.catch((error) => {
console.log(error);
});
}