Вызов функции при событии onChange для динамической установки значений свойств, которые будут использоваться в последующих полях внутри формы в React - PullRequest
Новая
       133

Вызов функции при событии onChange для динамической установки значений свойств, которые будут использоваться в последующих полях внутри формы в React

0 голосов
/ 07 августа 2020

В моей форме JSX у меня есть поле, в котором я выбираю значение из раскрывающегося массива, после выбора я хотел вызвать функцию и установить несколько свойств, которые я собираюсь использовать для заполнения следующих нескольких полей в форма. У меня проблемы с этим. Любой ответ действительно приветствуется. Ниже приведен фрагмент кода.

форма: 

const DeploymentFormComponent = (props: {
  handleNext: (values: any) => void;
  // contains the dynamic fields
  metadata: { [k: string]: string };
}) => {

const RepoSpec = async (e: any) => {
    const params = useParams();
    const result = await getRepoDetails(params.org, e);
    const repoSpecXYZ = JSON.parse(result.repoSpec);
    const owner: string = repoSpecXYZ.products.owner;
    const email: string = repoSpecXYZ.products.email;
    //console.log('owner', owner);
    //console.log('email', email);
  };

return(
<InfoCard>
      <Formik
        initialValues={initialValues}
        onSubmit={(values) => {
          console.log('values:', values);
          props.handleNext(values);
        }}  
      >
        {(formik) => (
          <form onSubmit={formik.handleSubmit}>
<div className={classes.formGroup}>
              <Autocomplete
                id="gitRepo"
                data-testid="gitRepo"
                options={repoArr}
                onChange={(_: any, gitRepoValue: any) => { formik.setFieldValue('gitRepo', gitRepoValue); RepoSpec(gitRepoValue) }
                }
                onBlur={() => formik.setTouched({ gitRepo: true })}
                value={formik.values.gitRepo}
                getOptionLabel={option => option}
                style={{ width: 300 }}
                renderInput={params => (
                  <TextField
                    required
                    {...params}
                    label="Project Repo"
                    variant="outlined"
                  />
                )}
              />
            </div>

<div>
              <Button
                type="submit"
                variant="contained"
                color="primary"
                className={classes.button}
                data-testid="next"
              >
                Next
              </Button>
            </div>


          </form>
        )}
      </Formik>
    </InfoCard>
  );
};
...