从子组件到父组件共享表单数据值-React js

Question

我制作了一个通用组件，用作父组件。我做了一个PageCommonComponent，如下所示。

import { Link } from 'react-router-dom';
import { Component } from 'react';
import ActionType from '../helper/Enum';
import axios from 'axios';
import BaseService from './base-service';
class PageCommon extends Component {
baseService = new BaseService();
constructor(pros) {
super(pros);
this.state = {
action: pros.action,
indexPageUrl: pros.indexPageUrl,
url: pros.url,
saveData: pros.saveData
}
}
saveData = () => {
console.log(this.state.saveData)
alert('save button clicked')

}
modifyData = () => {
}
deleteData = () => {
}
render() {
let button;
if (this.state.action === ActionType.Create) {
button =
<button type="button" onClick={this.saveData} className="btn btn-primary btn-round">
<i className="nc-icon nc-simple-add"></i>
&nbsp; Create
</button>
} else if (this.state.action === ActionType.Modify) {
button =
<button type="button" onClick={this.modifyData} className="btn btn-primary btn-round">
<i className="nc-icon nc-simple-update"></i>
&nbsp; Modify
</button>
} else if (this.state.action === ActionType.Delete) {
button =
<button type="button" onClick={this.deleteData} className="btn btn-danger btn-round">
<i className="nc-icon nc-simple-remove"></i>
&nbsp; Delete
</button>
}
return (
<div>
{button}
<Link className="btn btn-danger btn-round" to={this.state.indexPageUrl}>
<i className="nc-icon nc-simple-remove"></i>
&nbsp; Cancel
</Link>
</div>
);
}
}
export default PageCommon;

该组件将完成此处的所有crud功能。但是该值将从另一个子组件RoleCreate传递。以下是我如何在另一个组件上使用此组件。

import { Component } from 'react';
import PageCommon from './../../../common/pagecommon';
class RoleCreate extends Component {
constructor(pros) {
super(pros);
this.state = {
formData: {
roleName: ''
}
}
}
handleChange = (postData) => {
this.setState({ formData: postData });
}
render() {
return (
<div className="row">
<form style={{ 'width': '100%' }}>
<div className="col-md-12 col-sm-12 col-lg-12 card card-user">
<div className="row card-header" style={{ "borderBottom": "1px solid #d0c8c8" }}>
<div className="col-md-8">
<h5 className="card-title">Role Create</h5>
</div>
<div className="col-md-4 text-right">
<PageCommon
action={this.state.action}
url="/role/create"
indexPageUrl="/role"
saveData={this.state.formData}
onSubmitChild={this.state.formData} />
</div>
</div>
<div className="card-body">
<div className="row">
<div className="col-md-5 pr-1">
<div class
Name="form-group">
<label>Role Name</label>
<input type="text"
onChange={(e) => this.handleChange({ roleName: e.target.value })}
className="form-control" placeholder="Role Name" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
);
}
}
export default RoleCreate;

我通过saveData参数传递表单数据，但这不会传递值，而是只传递该表单数据的对象，而不传递任何值。我该怎么做？请帮帮我。谢谢。

Answer 1

PageCommon仅在组件准备装载时将传递的道具保存到构造函数中的状态。构造函数在组件的生命周期中只运行一次。

constructor(props) {
super(props);
this.state = {
action: props.action,
indexPageUrl: props.indexPageUrl,
url: props.url,
saveData: props.saveData
};
}

之后，它不处理接收更新的道具值。

据我所知，您希望在本地缓存表单数据，直到用户单击其中一个按钮对保存的数据采取一些操作。

在PageCommon中实现componentDidUpdate生命周期方法，以使用新的saveData表单数据和操作值更新本地状态。

componentDidUpdate(prevProps, prevState) {
// If saved data in state is different than new data from props, update state
if (prevState.saveData !== this.props.saveData) {
this.setState({
action: this.props.action,
saveData: this.props.saveData,
});
}
}