React:Passing 数据从 index.tsx 文件中的 TextField 发送到我们要调度的 hooks.js

Question

首先让我说我是一名具有 angular 背景的开发人员，刚刚参加了 React 项目，所以请原谅我的无知（我对 React 完全陌生，没有太多时间来学习它). 我必须在 index.tsx 文件中添加一个新的文本字段 'DispatcherComments' 并将其传递给 hooks.ts file.I 添加了文本字段，但我正在努力更新 hooks.ts 中的 DispatcherComments。

在 index.tsx 文件中，我提供了一个 TextField，我需要传递其值的名称为 name="DispatcherComments"，在 hooks.ts 末尾是我放置属性需要更新 'DispatcherComments' index.tsx:

interface IEventCreateModal {
  handleCloseModal: () => void,
  resourceRecord: {
    [key:string]: any,
  },
  eventRecord: {
    [key: string]: any,
  },
}

const EventCreateModal = ({
  handleCloseModal,
  resourceRecord,
  eventRecord,
}: IEventCreateModal) => {
  const {
    data: {
      loading,
      resourcesOptions,
      projectsOptions,
      initialValues,
      projects,
    },
    actions: { handleCreateEvent },
  } = useEventCreateModal({
    resourceRecord,
    eventRecord,
  });

  const submit = (values: any) => 
  handleCreateEvent(values);

  return (
    <Dialog
      open
      fullWidth
      maxWidth="sm"
      aria-labelledby="event-dialog"
      disableBackdropClick
      disableEscapeKeyDown
    >
      <DialogTitle
        id="event-dialog"
        style={{ textAlign: 'center' }}
      >
        {t('newEvent')}
      </DialogTitle>

      <DialogContent>
        <Formik
          initialValues={initialValues}
          onSubmit={submit}
          validate={validate}
          enableReinitialize
        >
          {({
            handleSubmit,
            errors,
            touched,
            values,
          }:any) => (
            <Form onSubmit={handleSubmit}>

            <Grid item xs={12}>
              <TextField id="outlined-basic" 
                   label={t('commentOptional')} 
                   name="DispatcherComments"
                   //onChange={changeState}
                   //onChange = {e => setDispatcherComments(e.target.value)}
                   //onChange={handleChange}
                   //value={dispatcherComments}
                   variant="outlined"
                   fullWidth/>
            </Grid>

              </Grid>

              <ModalButtonWrap>
                <Button onClick={handleCloseModal} variant="outlined" disabled={loading}>


                <Button type="submit" variant="contained" color="primary" disabled={loading}>
                  <ButtonCircularProgress loading={loading} label={t('createEvent')} />
                </Button>
              </ModalButtonWrap>
            </Form>
          )}
        </Formik>
      </DialogContent>
    </Dialog>
  );
};

EventCreateModal.propTypes = {
  handleCloseModal: PropTypes.func.isRequired,
};

export default EventCreateModal;

hooks.ts


interface IuseEventCreateModal {
  resourceRecord: {
    [key:string]: any,
  },
  eventRecord: {
    [key:string]: any,
  },
}

const useEventCreateModal = ({
  resourceRecord,
  eventRecord,
  
}: IuseEventCreateModal) => {
  const dispatch = useDispatch();
  const data = useSelector(selector);
  const handleCreateEvent = useCallback((values: any) => {

    const {
      ResourceId,
      ProjectDate,
      StartTime,
      EndDate,
      EndTime,
      ProjectID,
      DispatcherComments,
    } = values;
    


    dispatch(createEvent({

      DispatcherComments
    }));
  }, [dispatch, DispatcherComments]);

  return {
    data: {
      loading: data.loading,
      initialValues: {
        DispatcherComments:''
      },
    },
    actions: { handleCreateEvent },
  };
};

export default useEventCreateModal;

Answer 1

根据 example，我假设你做了这样的事情：

<Formik
  initialValues={initialValues}
  onSubmit={(data) => {
    handleCreateEvent(data);
  }}
>
  {(props) => (
    <Grid item xs={12}>
      <TextField
        label={t('commentOptional')}
        name="DispatcherComments"
        onChange={props.handleChange}//add onchange
        value={props.values.DispatcherComments}//add value
        variant="outlined"
        fullWidth
      />
    </Grid>
  )}
</Formik>

React:Passing 数据从 index.tsx 文件中的 TextField 发送到我们要调度的 hooks.js

React:Passing data from TextField in index.tsx file to hooks.js where we are dispatching

react-redux

formik

react-hooks