“EventTarget”类型上不存在属性“重置”.ts(2339)答案

【问题标题】：Property 'reset' does not exist on type 'EventTarget'.ts(2339)“EventTarget”类型上不存在属性“重置”.ts(2339)
【发布时间】：2020-07-16 19:44:54
【问题描述】：

我遇到了一个 SO 溢出，它建议我们可以在提交后使用 e.target.reset()on 表单来重置表单。但是，我无法在我的情况下使用它：

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved, setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const [removeUser] = useMutation<DeleteUserReponse>(REMOVE_USER);

  let submitForm = (email: string) => {
    setIsSubmitted(true);
    removeUser({
      variables: {
        email: email,
      },
    })
      .then(({ data }: ExecutionResult<DeleteUserReponse>) => {
        setIsRemoved(true);
      }})
  };
  const initialSTATE={ email: '' }

  return (
    <div>
      <Formik
        //initialValues={{ email: '' }}
        initialValues={{ ...initialSTATE}}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}>
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched,
          } = props;
          const change = (name: string, e: FormEvent) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);
          };
          return (
            <div className="main-content">
              <form
                style={{ width: '100%' }}
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(email);
                  e.target.reset();
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ''}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, 'email')}
                  />
                  <br></br>
                  <CustomButton
                    disabled={!isValid || !email}
                    text={'Remove User'}
                  />
                </div>
              </form>
              <br></br>
              {isSubmitted && StatusMessage(isRemoved, errorMessage)}
            </div>
          );
        }}
      </Formik>
    </div>
  );
}

如果我在onSubmit 的末尾使用它，我会收到上面提到的错误。我该如何解决这个问题？

【问题讨论】：

尝试使用 this.reset()
@Prince 'this' implicitly has type 'any' because it does not have a type annotation.ts(2683)

标签： javascript reactjs typescript import graphql

【解决方案1】：

我遇到了一个 SO 溢出，它建议我们可以在表单上使用 e.target.reset() 在提交后重置表单。

可能在反应时代之前有效。现在 react 会根据 props 的变化更新真实的 DOM。

想要重置表单？使用新值渲染它！

基于docs，您应该将handleSubmit 属性传递给渲染的<form/>：

<form onSubmit={props.handleSubmit}>

这个handleSubmit 将调用（验证后）Formik 的onSubmit 处理程序。 这是您应该定义自定义逻辑的地方。

onSubmit 是用(values, actions) 调用的，所以你可以

submitForm(values.email);
actions.resetForm()

或将actions 传递给您的submitForm 并在此方法中使用resetForm。

【讨论】：