在 handleChange Typescript 中传递值

Question

我在网上看到的所有示例中，只有事件被传递到 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)

Answer 1

您正在尝试访问尚未分配的值。首先，声明它们然后尝试访问它们。此外，您正在使用 event.target 但您需要使用 e.target 来代替，因为您已经声明了如下事件：

 const handleChange = (e: ChangeEvent<HTMLInputElement>)

因此，handleChange() 函数中的代码需要更新为：

 const { name,value } = e.target;
 if (name && value){
    formik.setFieldValue(name, value);
 }

Answer 2

在您的 handleChange 中，您使用 (e) 作为参数，但随后您引用了 event.target。将您的参数重命名为 (event).

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

在 handleChange Typescript 中传递值

Pass Value in handleChange Typescript

javascript

typescript

reactjs

material-ui

formik