Изменить входное значение нажатием на кнопку - PullRequest
Новая
       36

Изменить входное значение нажатием на кнопку

0 голосов
/ 14 апреля 2020

Я в настоящее время борюсь с кнопкой «Автоматически сгенерировать ссылку». После нажатия поле «ссылка» должно быть заполнено данными «http://predefinedlink.com»

Из-за комбинации пользовательского интерфейса Formik + Material, используемого здесь, я изо всех сил пытаюсь добиться этого. 

const useStyles = makeStyles((theme) => ({[...]}));

const EventStream = ({ onSubmit, eventStream }) => {
  const classes = useStyles();

  return (
    <Formik
      initialValues={{
        link: maybe(() => eventStream.link, "") || "",
      }}
      onSubmit={onSubmit}
      validateOnBlur={false}
      validateOnChange={false}
      enableReinitialize
    >
      {({ handleSubmit, isSubmitting, dirty }) => (
        <FormikForm autoComplete="off" noValidate>
          <Card>
            <CardContent>
              <Grid container spacing={3}>
                <Grid xs={12} item>
                  <Field name="link" label="Link" component={TextField} />
                  <button
                    onClick={console.log("Fill TextField 'link' with new data")}
                  >
                    Auto generate link &raquo;
                  </button>
                </Grid>
              </Grid>
            </CardContent>
            <CardActions className={classes.cardActions}>
              <Button
                variant="contained"
                color="primary"
                classes={{
                  root: clsx(classes.saveButton, {
                    [classes.saveButtonDirty]: !dirty,
                  }),
                  disabled: isSubmitting && classes.saveButtonDisabled,
                }}
                disabled={isSubmitting || !dirty}
                onClick={handleSubmit}
              >
                Save
                {isSubmitting && (
                  <CircularProgress
                    size={20}
                    thickness={5}
                    color="inherit"
                    className={classes.saveButtonProgress}
                  />
                )}
              </Button>
            </CardActions>
          </Card>
        </FormikForm>
      )}
    </Formik>
  );
};

export default EventStream;

1 Ответ

0 голосов
/ 14 апреля 2020

Возможно, вам понадобится setFieldValue 

{({ handleSubmit, isSubmitting, dirty }) => (

до 

{({ handleSubmit, isSubmitting, dirty, setFieldValue  }) => (

Обработчик нажатия кнопки 

             <button
                onClick={()=> {

                 setFieldValue ('link',  'http://predefinedlink.com')
                 }
               }
              >
                Auto generate link &raquo;
              </button>
...