Блог

Я создал общий компонент, который служил родительским компонентом. Я сделал 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>
                amp;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>
                amp;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>
                amp;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>
                amp;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 параметр, но это не передает значение, а передает только объект этого FormData без какого-либо значения.
Как я могу это сделать, пожалуйста, помогите мне. Спасибо.

PageCommon сохраняет переданные реквизиты в состояние в конструкторе только тогда, когда компонент готовится к монтированию. Конструктор запускается только один раз в жизненном цикле компонента.

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

После этого он не обрабатывает получение обновленных значений prop.

Из того, что я могу сказать, вы хотите локально кэшировать данные формы, пока пользователь не нажмет одну из кнопок, чтобы выполнить какое-либо действие с сохраненными данными.

Внедрите метод componentDidUpdate жизненного PageCommon цикла, чтобы обновить локальное состояние новыми 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,
    });
  }
}