标签: react-hook-form

我正在尝试将 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>
    );
}

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

我想在输入字段中使用react-hook-form. 首先，我从 API 端点检索用户数据，然后将状态设置users为该用户数据。然后我将状态传递users给defaultValuesof useForm()。

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";

function LoginFile() {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    axios
      .get("http://localhost:4000/users/1")
      .then((res) => setUsers(res.data));
  }, []);

  useEffect(() => {
    console.log(users);
  }, [users]);

  const { register, handleSubmit, errors } = useForm({
    defaultValues: users,
  });
 return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        Email <input type="email" name="email" ref={register} /><br />
        firstname …

所以我基本上是新的 with-react-hook-form 我创建了一个带有受控输入的表单，其中第二个输入的条件基于我的第一个输入。我的第一个输入是持续时间，我有两个选项“每月”和“每年”。我的第二个输入是预算，其中每月的最低预算为 200，每年的最低预算为 400。

这是我的代码：

<div style={{ marginTop: theme.spacing(1) }}>
    <Controller
      as={Select}
      row
      name="duration"
      control={control}
      defaultValue="Monthly"
      fullWidth
      label={<FormattedMessage {...messages.duration} />}
      margin="normal"
      options={DURATION_OPTIONS}
      rules={{
        required: 'Required'
      }}
    />
  </div>


  <div>
    <Controller
      as={NumberField}
      row
      name="budget"
      control={control}
      defaultValue="1000"
      fullWidth
      label={<FormattedMessage {...messages.howMuchBudget} />}
      margin="normal"
      rules={{
        required: true,
        min: {
          value: 400,
          message: 'Min is 400',
        }
      }}
    />
  </div>

现在我想根据我的第一个字段验证动态触发我的第二个字段验证。如果我选择的持续时间为每月，则第二个输入的最小验证应为 200，如果我的持续时间选择为每年，则第二个输入的最小验证应为 400。

任何帮助将不胜感激。

听起来很简单，但尽管文档内容丰富，但我找不到这方面的 hello-world 示例。我能找到的最接近的是https://react-hook-form.com/advanced-usage中的“使用虚拟化列表”部分，但这依赖于另一个模块react-window，这会带来进一步的复杂性。

我想允许管理员用户创建、更新、删除具有各种属性的产品列表。

我当前在 JSX 中的代码如下所示，我想利用react-hook-form 中的错误处理等：

    <ol >
      {products.map((row, index) => (
            <li 
                className={index === selectedProductIndex ? "selected" : ""} 
                key={index} 
                id={index} onClick={handleSelectProduct}>
                {row.name}
            </li>
        ))}
    </ol>
    <form onSubmit={handleSaveProduct}>
           <p>Product name: </p>
              <input name="productName" type="text" value={selectedProductName} 
              onChange={handleEdit_name} />
               (... more properties to edit here)
                    
                  </form>

处理程序将 selectedProductName、selectedProductIndex 等的值保存在 useState 中，通过 axios 等保存在数据库中。我在 useState 中单独处理每个字段的值，我知道这是费力且粗暴的。

如何将react-dropzone与react-hook-form一起使用，以便表单返回正确的文件-而不仅仅是文件名？

所以我有一个表单，其中包含我通过来自 react-hook-form 的 Field Array 添加的自定义字段。一切正常，但我为属性项添加了拖放功能（以重新排序），现在直接显示所有这些许多字段会很麻烦，所以我将它们移动到对话框中。

以下是了解什么更容易拖放的图片......（正确的）

问题是字段数组值在模式关闭后“重置”（在我在编辑模式中输入这些表单值之后），我猜这与重新渲染有关，但我不确定。

我试图在没有 d&d 和其他无用的东西的情况下展示最小的代码示例......
但这里是带有完整代码的代码和盒子游乐场

创建CategoryForm.js

const defaultValues = {
  name: "",
  slug: "",
  description: "",
  properties: [] // field array
}

function CreateCategoryForm() {
  const methods = useForm({ defaultValues });
  const { handleSubmit, control, errors } = methods;
  const { fields, append, remove, swap } = useFieldArray({ name: "properties", control });

  const onSubmit = async (data) => {
    console.log("data: ", data);
  };

  return (
    <Container>
        <FormProvider {...methods}>
          <form onSubmit={handleSubmit(onSubmit)} noValidate>
            <FormTextField …

我正在使用这两个很好的react表单库（连同axios）：

• react-bootstrap和
• react-hook-form（好像是react表单库在up上）

似乎没有明确的参考让两人打得很好？基本配方是什么？

这个问题 和这个问题 部分解决了这个问题，但它有点神秘。

（我试图在下面自己回答这个问题，但请随意改进 - 特别是如果它证明了这些库可以更好地协同工作）

我正在尝试使用带有 NumberFormat 的 React hook 形式，无需 Controller 且无需 ReactDOM.findDOMNode （已弃用和不鼓励）。以下代码有效

import React from 'react';
import ReactDOM from 'react-dom';
import { useForm } from 'react-hook-form';
import NumberFormat from 'react-number-format';

function FormWorking() {
  const { register, handleSubmit, getValues } = useForm();

  function onSubmit() {
    console.log(getValues());
  }

  const cardNumberReg = register('cardNumber');
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          ref={(inst) => (cardNumberReg.ref(ReactDOM.findDOMNode(inst)))}
      />
    </form>
  );
}

ReactDOM.render(
  <FormWorking />, document.getElementById('root')
);

但我不想使用 findDOMNode。以下尝试均无效（cardNumber 在日志中为空或未定义）

      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          getInputRef={(e: …

我想创建一个表单，其中提交按钮位于标题中。我目前正在使用react-hook-forms，但无法从显示表单（或子项）的布局中的组件提交表单。我添加了一张图像，可以帮助您直观地了解我正在谈论的内容。

有没有办法可以将表单数据或handleSubmit从react-hook-form传递到标头，然后在单击时运行onSubmit？

我正在使用 react-hook-forms Controller api 围绕来自 react-select 的 AsyncSelect 加载选项，因为用户从外部 API 键入。一切正常，除了返回的值作为字符串"[object Object]"而不是对象的 fullName 属性返回。

我的组件：

           <Controller
            control={control}
            name="businessCategory"
            as={
              <AsyncSelect
                className="react-select-container"
                loadOptions={v => handleAutocompleteLookup(v)}
                onChange={handleCategoryInputChange}
                getOptionLabel={option => option.name}
                getOptionValue={option => option.fullName}
              />
            }
          />

我的 handleChange 函数。SetValue 来自 react-hook-form：

  const handleCategoryInputChange = newValue => {
    return setValue('businessCategory', newValue, true);
  };

我的任何数据都是具有以下形状的对象数组：

{
  fullName: "DJ service"
  id: "gcid:dj"
  name: "DJ service"
  publisher: "GMB"
}

任何有关这方面的线索将不胜感激，谢谢！