Question

我正在尝试将antk <Input />组件与react-hook-form一起使用

我没有让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

编辑：

此处React Hook Form with AntD Styling中提到的RHFInput现在是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;

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

react-hook-form重置不适用于Controller + antd

1 个答案: