javascript - 通过遏制 react 组件中的提升状态

Question

我目前有一个带有遏制功能的模态系统。有一个 ModalWrapper 处理关闭模式和表单提交。实际的模式内容位于另一个组件中，我将其称为 EventsModalForm:

模态包装:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { EVENT_FORM_MODAL } from '../layout/modalTypes';

const ModalWrapper = props => {
  const handleBackgroundClick = e => {
    if (e.target === e.currentTarget) props.hideModal();
  };

  const onOk = () => {
    if (props.modal.currentModal === EVENT_FORM_MODAL){
      //Do form submition 
    } else {
      props.onOk();
    }
    props.hideModal();
  };

  const [formStates, setFormStates] = useState({
    ...props.modal.form_fields
  });
  const handleFormChange = e => {
    return setFormStates({ ...formStates, [e.target.name]: [e.target.value] })    
  }


  const okButton = props.showOk
    ? (
      <button
        className="btn btn-primary"
        onClick={onOk}
        disabled={props.okDisabled}
      >
        {props.modal.okText}
      </button>
    ) : null;


  return (
    <div className="modal-overlay-div" onClick={handleBackgroundClick}>
      <div style={modal_content_div}>
        <header>
            <span>
              <button onClick={props.hideModal} className="close">&times;</button>
            </span>
            <h1>{props.title}</h1>  
          <hr />   
        </header>

        {props.children}

        {okButton}
      </div>
    </div>
  );
};
//content shortened for clarity  

export default ModalWrapper;

事件模态表单:

import React from 'react';
import {
  Button,
  Form,
  FormGroup,
  Input,
  Label
} from "reactstrap";

import 'flatpickr/dist/themes/material_blue.css';
import Flatpickr from 'react-flatpickr';


import ModalWrapper from './ModalWrapper';

const EventsFormModal = props => {
  //have form hook here
  return (
    <ModalWrapper
      {...props}
      title="Event form"
      width={600}
      showOk={true}
    >
      <Form>
        //form...
      </Form>
    </ModalWrapper>
  );
};

export default EventsFormModal;

我尝试在 EventsFormModal 中使用 Hook ，并且每当调用 onOk 时，都将状态传递给 ModalWrapper。但是，根据我的模态设置方式，我似乎无法找到将状态提升到 ModalWrapper 的方法。传递给 ModalWrapper 和 EventsFormModal 的 Prop 是相同的，因此我无法在父组件中创建函数并将其作为 Prop 传递给子组件。任何帮助，将不胜感激!

Answer 1

我假设您希望在用户单击“确定”后将输入的数据传递回ModalWrapper。我做了这个小演示来展示如何做这样的事情..

const { useState } = React;
const { render } = ReactDOM;

const SomeModal = () => {
  const [show, setShow] = useState(false);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const showModal = () => setShow(true);
  const hideModal = () => setShow(false);
  
  const handleNameChange = event => setName(event.target.value);
  const handleEmailChange = event => setEmail(event.target.value);

  return (
    <main>
      <ModalWrapper show={show} handleClose={hideModal} onOk={({name, email})}>
        <input type="text" onChange={handleNameChange} placeholder="Name" />
        <input type="text" onChange={handleEmailChange} placeholder="Email" />
      </ModalWrapper>
      <button type="button" onClick={showModal}>
        Open Modal
      </button>
    </main>
  );
};

const ModalWrapper = ({ handleClose, show, children, onOk }) => {
  const [onOkData, setOnOkData] = useState();
  const showHideClassName = show ? "modal display-block" : "modal display-none";
  
  const handleModalClose = (event, data) => {
    handleClose();
    setOnOkData(onOk);
  }

  return (
    <div>
    <div className={showHideClassName}>
      <section className="modal-main">
        {children}
        <button onClick={handleModalClose}>Ok</button>
      </section>
    </div>
      {onOkData 
        ? <pre>This data was sent from "SomeModal": {JSON.stringify(onOkData, null, 2)}</pre> 
        : ""}
    </div>
  );
};

const App = () => <SomeModal />

render(<App />, document.body);

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.modal-main {
  position:fixed;
  background: white;
  width: 80%;
  height: auto;
  top:50%;
  left:50%;
  padding: 20px;
  transform: translate(-50%,-50%);
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>