11

我正在尝试将 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：

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

4

1 回答 1

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 进行了测试，并且在如何使用图标方面发生了一些变化。

于 2021-04-30T14:43:46.310 回答