Question

我正在组件true中的道具open内传递NewProject。事实是，我想添加一个将其状态更改为false的函数，但似乎无法（Identifier 'open' has already been declared (25:9))。我需要这样做，因为我需要以某种方式关闭模式。 / p>

NewProject.jsx

// @flow

import React from 'react';
import {
  Button, Tabs, TabItem, Modal,
} from '@duik/it';
import classNames from 'classnames';
import { t as typy } from 'typy';
import {
  Formik, Form,
} from 'formik';
import * as Yup from 'yup';
// import Modal from './Modal';
import {
  ProjectData, ClientsData, Observations,
} from './NewProjectComponents';

type Props = {
  history: any,
  open: Boolean,
}

export const NewProject = ({history, open }: Props) => {
  const [activeTab, setActiveTab] = React.useState(1);

  const NewProjectValSchema = Yup.object().shape({
    proyectType: Yup.string().required('Campo obligatorio'),
    sampleType: Yup.string().required('Campo obligatorio'),
    dischargeType: Yup.string().required('Campo obligatorio'),
    receptionDate: Yup.string().required('Campo obligatorio'),
    deliverDate: Yup.string().required('Campo obligatorio'),
    dischargeNorms: Yup.string().required('Campo obligatorio'),

    companyName: Yup.string().required('Campo obligatorio'),
    companyAddress: Yup.string().required('Campo obligatorio'),
    jobOrigin: Yup.string().required('Campo obligatorio'),
    uniqueNumber: Yup.string().required('Campo obligatorio'),
    source: Yup.string().required('Campo obligatorio'),
    establishmentType: Yup.string().required('Campo obligatorio'),

    observations: Yup.string().required('Campo obligatorio'),
  });

  const tabsContent = [
    {
      index: 1,
      title: 'Proyecto',
      component: ProjectData,
      props: {},
    },
    {
      index: 2,
      title: 'Datos del cliente',
      component: ClientsData,
      props: {},
    },
    {
      index: 3,
      title: 'Observaciones',
      component: Observations,
      props: {},
    },
  ];

  const initialValues = {
    projectType: '',
    sampleType: '',
    dischargeType: '',
    receptionDate: '',
    deliverDate: '',
    dischargeNorm: ['ISO Norma', '78 Norma', 'C78 Norma'],

    companyName: '',
    companyAddress: '',
    jobOrigin: '',
    uniqueNumber: '',
    source: '',
    establishmentType: '',

    observations: '',
  };

  const onSubmit = (values, { setSubmitting }) => {
    const newProjectParams = {
      project: {
        projectType: typy(values, 'projectType').safeObject,
        sampleType: typy(values, 'sampleType').safeString,
        dischargeType: typy(values, 'dischargeType').safeString,
        receptionDate: '',
        deadlineDate: '',
        norm: typy(values, 'norm').safeString,
        limitNormStart: typy(values, 'limitNormStart').safeNumber,
        limitNormEnd: typy(values, 'limitNormEnd').safeNumber,
        client: {
          companyName: typy(values, 'companyName').safeString,
          companyAddress: typy(values, 'companyAddress').safeString,
          jobOrigin: typy(values, 'jobOrigin').safeString,
          uniqueNumber: typy(values, 'uniqueNumber').safeNumber,
          source: typy(values, 'source').safeString,
          establishmentType: typy(values, 'establishmentType').safeString,
        },
        observations: typy(values, 'observations').safeString,
      },
    };
    alert(JSON.stringify(newProjectParams, null, 4));
    setSubmitting(false);
  };

  const renderFooter = (isSubmitting, submitForm, values, setSubmitting, isValid) => (
    <React.Fragment>
      <span className='modal__footer'>
        <Button transparent onClick={handleClose}>Cancelar</Button>
        <Button
          onClick={() => {
            if (activeTab < tabsContent.length) {
              setActiveTab(activeTab + 1);
            } else {
              onSubmit(values, { setSubmitting });
            }
          }}
          success
          loading={isSubmitting}
          disabled={isSubmitting}
        >
          {
            activeTab < tabsContent.length ? 'Siguiente' : 'Guardar'
          }
        </Button>
      </span>
    </React.Fragment>
  );


  return (
    <div>
      <Formik
        initialValues={initialValues}
      >
        {({ isSubmitting, submitForm, onSubmit, values, setSubmitting, isValid }) => (
          <Modal
            header='Datos de Proyecto'
            isOpen={open}
            handleClose={handleClose}
            sm
            closeOnOuterClick
          >
          <Modal.Header className='modal__header'>Datos de proyecto</Modal.Header>
            <Tabs className='tabs'>
              {
                tabsContent.map((tab) => (
                  <TabItem
                    tabIndex={tab.index}
                    className={classNames(activeTab === tab.index ? 'active-tab' : null)}
                    key={`tab_index_${tab.index}`}
                    onClick={() => {
                      setActiveTab(tab.index);
                    }}
                  >
                    {tab.title}
                  </TabItem>
                ))
              }
            </Tabs>
            <Modal.Body className='modal__body'>
              {
                tabsContent.map((tab, index) => (
                  <div
                    className={classNames('tab-content', { active: tab.index === activeTab })}
                    key={`tab_div_index_${index}`}
                  >
                    <div>
                      <Form autoComplete='off'>
                        <tab.component {... tab.props} />
                        <span className='modal__footer'>
                          <Button transparent>Cancelar</Button>
                          <Button
                            onClick={() => {
                              if (activeTab < tabsContent.length) {
                                setActiveTab(activeTab + 1);
                              } else {
                                onSubmit(values, { setSubmitting });
                              }
                            }}
                            success
                          >
                            {
                              activeTab < tabsContent.length ? 'Siguiente' : 'Guardar'
                            }
                          </Button>
                        </span>
                      </Form>
                    </div>
                  </div>
                ))
              }
            </Modal.Body>
          </Modal>
        )}
      </Formik>
    </div>
  );
};

export default NewProject;

路线：

export const App = () => (
  <div className='app'>
    <ContainerVertical>
      <Topbar />
      <ContainerHorizontal>
        <Sidebar />

        <Router>
          <Switch>
            <Route path={URL.APP} component={Projects} />
          </Switch>
          <Switch>
            <Route path={URL.NEW_PROJECT} render={(props) => (<NewProject {...props} open />)} />
          </Switch>
        </Router>
      </ContainerHorizontal>
    </ContainerVertical>
  </div>
);

Answer 1

您必须在open中的App实例化位置处更改其属性，或将setter作为props传递给NewProject组件，以调用该setter并更改{ {1}}。

如何更改通过React Router传递的道具的状态？

1 个答案: