reactjs - react-hook-form reset 不适用于 Controller + antd

Question

我正在尝试将 react-hook-form 与 antd <Input /> 一起使用成分

我没有收到 reset与 <Controller /> 一起工作

这是我的代码:

const  NormalLoginForm = () =>{
  const {reset, handleSubmit, control} = useForm();

  const onSubmit = handleSubmit(async ({username, password}) => {
        console.log(username, password);
        reset();
  });

    return (
      <form onSubmit={onSubmit} className="login-form">
        <Form.Item>
                        <Controller as={<Input
                            prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            autoFocus={true}
                            placeholder="Benutzername"

                        />} name={'username'} control={control}/>

                    </Form.Item>
                    <Form.Item>
                        <Controller as={<Input
                            prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            type="password"
                            placeholder="Passwort"

                        />} name={'password'} control={control}/>
                    </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
        </Form.Item>
      </form>
    );
}

我期望在提交表单时清除两个输入字段。但这不起作用。

我在这里错过了什么吗？

Stackblitz 上的示例
https://stackblitz.com/edit/react-y94jpf?file=index.js

编辑:
RHFInput这里提到React Hook Form with AntD Styling现在是 react-hook-form 的一部分，并已重命名为 Controller .我已经在用了。

我已经发现改变

reset();

到

reset({
  username:'',
  password:''
});

解决了这个问题。

但是 - 我想在不明确分配新值的情况下重置整个表单。

编辑 2:

Bill 在评论中指出，几乎不可能检测到外部控制输入的默认值。因此，我们被迫将默认值传递给 reset 方法。这对我来说完全有意义。

Answer 1

您必须为 antd 包装组件并创建一个渲染组件，如果您使用 Material UI 则非常相似，因此代码可以是这样的:

import { Input, Button } from 'antd';
import React from 'react';
import 'antd/dist/antd.css';
import {useForm, Controller} from 'react-hook-form';

const RenderInput = ({
  field: {
    onChange,
    value
  },
  prefix,
  autoFocus,
  placeholder
}) => {

  return (
    <Input
      prefix={prefix}
      autoFocus={autoFocus}
      placeholder={placeholder}
      onChange={onChange}
      value={value}
    />
  );
}

export const  NormalLoginForm = () =>{
  const {reset, handleSubmit, control} = useForm();

  const onSubmit = ({username, password}) => {
        console.log(username, password);
        reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="login-form">
      <Controller
        control={control}
        name={'username'}
        defaultValue=""
        render={ ({field}) => (
          <RenderInput
            field={field}
            autoFocus={true}
            placeholder="Benutzername"
          />
          )}
      />
      <Controller
        render={ ({field}) => (
          <RenderInput
            field={field}
            type="password"
            placeholder="Passwort"
          />
          )}
        defaultValue=""      
        name={'password'}
        control={control}
      />
      <Button
        type="primary"
        htmlType="submit"
        className="login-form-button"
      >
        Log in
      </Button>
    </form>
  );
}

export default NormalLoginForm;

您可以注意到我没有放置 Icon ，这是因为我使用 antd 版本 4 进行了测试，并且在如何使用图标方面发生了一些变化。