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

我制作了一个公共组件，作为父组件。 我制作了一个

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;

我通过

saveData

参数传递表单数据，但这不会传递值，而是只传递该表单数据的对象，而不传递任何值。

---

我该怎么做？请帮帮我。谢谢。

PageCommon

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

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

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

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

执行

PageCommon

中的

componentdiddupdate

生命周期方法，用新的

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

---

我看不到任何地方

PageCommon

可以访问挂载后传递给它的任何道具。按原样，

PageCommon

是

RoleCreate

的子组件

RoleCreate

没有

此.state.action

。你真的想让

PageCommon

作为一个孩子呈现

RoleCreate

，并传递一个回调，

RoleCreate

可以调用表单数据并将表单数据传递回

PageCommon

？或者您需要在

PageCommon

@drewerese中实现

componentdiddupdate

方法，我对react js是新手。我只想把RoleCreate的表单数据传递给PageCommon。您可以看到

saveData={this.state.formData}

用于将formcontent传递给PageCommon组件，但它并没有按预期的那样执行。我可以在react中的组件之间共享状态值吗？您可以将您想要的任何东西作为道具传递给子组件。收到更新的道具后，您希望如何处理它们？

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