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 帶有 AntD 樣式的 React Hook Form現在是 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 進行了測試，並且在如何使用圖標方面發生了一些變化。