如何仅使用提交按钮进行 onChange 调用？

Question

我有一个 onChange 每次我 select 一个选项时都会调用它，但我需要它只在我点击提交按钮时调用所有 fullfilled 首选项。我认为这可能很简单，但我觉得我遗漏了一些要点……下面的代码非常简单，但如果解决了这个问题，它就解决了剩下的问题。我正在使用 react-js、Formik 和 Styled Components。

我尝试将 onChange 放在按钮中，但它没有填充 "render"...

有没有办法在onChange中调用onSubmit？

选项（在json）：

[
  { "value": "tracker_itens", "label": "Listagem de Veículos", "render": 1 },
  {
    "value": "traveled_kms",
    "label": "Listagem de KM Percorridos",
    "render": 2
  },
  {
    "value": "offline_itens",
    "label": "Listagem de Itens Offlines",
    "render": 3
  },
  {
    "value": "maintenance",
    "label": "Listagem de Manutenções",
    "render": 4
  },
  {
    "value": "supply",
    "label": "Listagem de Abastecimentos",
    "render": 5
  },
  {
    "value": "violation",
    "label": "Listagem de Infrações",
    "render": 6
  },
  {
    "value": "idle_itens",
    "label": "Listagem de Itens Ociosos",
    "render": 7
  },
  { "value": "history", "label": "Listagem de Histórico", "render": 8 }
]

代码( 尽可能简化）：

function Reports() {
  registerLocale("pt-BR", el);

  const formik = useFormik({
    initialValues: {
      render: 0
    },
    onSubmit: values => {
      console.log(values);
    }
  });

function renderType(option) {
    formik.setFieldValue("render", option.render);
  }

return (
    <ContainerStyled>
      <ReportMainContainer>
        <ContainerFilters>
          <form onSubmit={formik.handleSubmit}>
            <HeaderFilter>RELATÓRIOS</HeaderFilter>
            <BodyFilter>
              <FieldContainer>
                <LabelStyled>Tipo de Relatório</LabelStyled>
                <SelectStyled
                  options={reportTypeOptions}
                  placeholder="Selecione o tipo"
                  noOptionsMessage={() => "Nenhuma opção encontrada"}
                  onChange={renderType}
                />
              </FieldContainer>
              {formik.values.render === 1 ? (
                ""
              ) : formik.values.render === 2 ? (
                <TraveledKmsFilter />
              ) : formik.values.render === 3 ? (
                <OfflineItensFilter />
              ) : formik.values.render === 4 ? (
                <MaintenanceFilter />
              ) : formik.values.render === 5 ? (
                <SupplyFilter />
              ) : formik.values.render === 8 ? (
                <HistoryFilter />
              ) : (
                ""
              )}
            </BodyFilter>
            <ButtonsFilter>
              <FilterButton type="submit" color="#555">
                Visualizar
              </FilterButton>
            </ButtonsFilter>
          </form>
        </ContainerFilters>
      </ReportMainContainer>
      <TableContainer>
        {formik.values.render === 1 ? (
          <Vehiecles />
        ) : formik.values.render === 2 ? (
          <TraveledKms />
        ) : formik.values.render === 3 ? (
          <OfflineItens />
        ) : formik.values.render === 4 ? (
          <Maintenance />
        ) : formik.values.render === 5 ? (
          <Supply />
        ) : formik.values.render === 8 ? (
          <History />
        ) : (
          "asdsadasd"
        )}
      </TableContainer>
    </ContainerStyled>
  );
}

Answer 1

有效的解决方案，适用于遇到类似问题的人：

声明 useState 以在 onSubmit 中完成工作：

const [reportType, setReportType] = useState(0); //new

  registerLocale("pt-BR", el);

  const formik = useFormik({
    initialValues: {
      render: 0
    },
    onSubmit: values => {
      setReportType(values.render); //new
    }
  });

然后，调用 "reportType" 作为三元运算符的条件，而不是 formik.values.render:

<TableContainer>
        {reportType === 1 ? (
          <Vehiecles />
        ) : reportType === 2 ? (
          <TraveledKms />
        ) : reportType === 3 ? (
          <OfflineItens />
        ) : reportType === 4 ? (
          <Maintenance />
        ) : reportType === 5 ? (
          <Supply />
        ) : reportType === 8 ? (
          <History />
        ) : (
          "asdsadasd"
        )}
</TableContainer>

如何仅使用提交按钮进行 onChange 调用？

How to make a onChange calling only with the submit button?

javascript

reactjs

formik