Передать значение в дескрипторе handleChange - PullRequest
Новая
       31

Передать значение в дескрипторе handleChange

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

Во всех примерах, которые я видел в сети, в handleChange передавалось только событие, а значение использовалось автоматически. Однако я получаю сообщение об ошибке, что значение не найдено. Как я могу использовать значение в handleChange? Я пытаюсь проверить форму, используя Formik здесь. 

export default function MyPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved, setIsRemoved] = useState(false);

  const [removeUser] = useMutation<Response>(USER);

  let submitForm = (email: string) => {
    User({
      variables: {
        email: email,
      },
    })
      .then(({ data }: ExecutionResult<Response>) => {
        if (data !== null && data !== undefined) {
          setIsRemoved(true);
        }
      })  };

  const formik = useFormik({
    initialValues:{ email: '' },
    onSubmit:(values, actions) => {
       setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
          }, 1000);
        },
       validationSchema:schema
    })

    const handleChange = (e: ChangeEvent<HTMLInputElement>)=>{
      if (name!== null) && (value!==null){
      const {name,value} = event.target;
      formik.setFieldValue(name,value);
      }
     }

  return (
    <div>
              <Form
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(formik.values.email);
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={formik.touched.email ? formik.errors.email : ''}
                    error={formik.touched.email && Boolean(formik.errors.email)}
                    label="Email"
                    value={formik.values.email}
                    //onChange={change.bind(null, 'email')}
                    onChange={handleChange}
                  />
                  <CustomButton
                    disabled={!isValid || !formik.values.email}
                    text={'Remove User'}
                  />
                </div>
              </Form>
    </div>
  );
}

В этой строке: 

const {name,value} = event.target;

Я также получаю эту ошибку, хотя я уже проверяю это с помощью оператора if: 

Property 'name' does not exist on type 'EventTarget | null'.ts(2339)

Ответы [ 2 ]

1 голос
/ 07 апреля 2020

Вы пытаетесь получить доступ к значениям, которые еще не назначены. Сначала объявите их, затем попробуйте получить к ним доступ. Кроме того, вы используете event.target, но вам нужно использовать e.target вместо этого, так как вы объявили событие как: 

 const handleChange = (e: ChangeEvent<HTMLInputElement>)

Итак, код внутри функции handleChange() необходимо обновить следующим образом: 

 const { name,value } = e.target;
 if (name && value){
    formik.setFieldValue(name, value);
 }
0 голосов
/ 07 апреля 2020

В вашем handleChange вы используете (e) в качестве параметра, но затем ссылаетесь на event.target. Переименуйте ваш параметр в (событие). 

handleChange= (event) => {
    const {name,value} = event.target;
    ...
}
...