标签: react-hook-form

如何使用react-testing-library对屏蔽的输入字段进行单元测试。该组件是使用material ui 和react-hook-form 开发的。在这里您可以找到代码并处理我这边的示例。提前致谢

测试文件：

 let Phone_Input = getByTestId("phone-input");

  fireEvent.change(
      <InputMask mask="(999) 999-9999">{() => Phone_Input}</InputMask>,
      {
        target: { value: "9500902621" }
      }
    );

成分：

                      <InputMask mask="(999) 999-9999">
                          {() => (
                            <TextField
                              id="standard-required"
                              name="phone"
                              label="phone"
                              placeholder="Enter Phone"
                              inputProps={{
                                "data-testid": "phone-input"
                              }}

                            />
                          )}
                        </InputMask>

错误：

    The given element does not have a value setter

    expect(received).toBe(expected) // Object.is equality

    Expected: "(950) 090-2621"
    Received: "(___) ___-____"

我正在尝试向文本字段添加验证规则，如果选中表单中的单独复选框，则该字段必须是非空字符串才能提交表单。

这是我到目前为止所拥有的链接：https ://codesandbox.io/s/magical-hypatia-n7o5w

我需要表单（“tiger_type”）中的最终文本输入，仅当选中 id 为“tiger”的复选框输入时才需要输入值。

我是反应和反应钩子形式的新手，所以任何指示将不胜感激。提前致谢。

我有一个包含自动完成材质 UI 控件的反应挂钩表单。

    <Controller
      as={
        <Autocomplete
          data-cy="profileCountry"
          options={countries}
          getOptionLabel={option => option.name}
          renderInput={params => (
            <TextField
              {...params}
              label="* Country"
              placeholder="Select a Country"

              InputLabelProps={{
                shrink: true
              }}
              variant="outlined"
            />
          )}
        />
      }
      rules={{ required: true }}
      onChange={([, data]) => data}
      defaultValue={{ id: 0, name: "" }}
      getOptionSelected={(option, value) => option.id === value.id}
      name="country"
      id="country"
      control={control}
    />

我想运行 cypress 测试用例来填写表单并提交。我如何使用 cypress 选择此组件中的第一个选项。

目前我只是尝试一下运气，如下所示。

cy.get("[data-cy=profileCountry]").select("Germany");

我是ReactJs中的新手，所以我正在使用react-hook-form和Yup模式验证，我需要验证我的“选择字段”，并且当我的“选择字段”onChange时我需要做一些事情。但模式验证不起作用。例如：当单击提交按钮并且“选择字段”上的值为空/空时，会出现错误消息，但是当选择字段值更改为非空/非空值时，错误消息不会消失，并且错误消息仍然退出。我的目标是当“选择字段”值不为空时，错误消息消失。有人知道怎么修这个东西吗？预先感谢并为我蹩脚的英语感到抱歉。下面是我的代码和codesandbox 中的链接。 代码沙箱

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

import "./styles.css";

const SignupSchema = yup.object().shape({
  select: yup.string().required()
});

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(SignupSchema)
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  const doSomething = (value) => {
    // do something with my select value onChange
  }; …

我为表单创建了一个模型，该模型通过它进行映射以使用react-hook-form创建表单

当我第一次提交表格时，一切都很好。但在其他时候，当我将值粘贴到输入中时，验证无法正常工作（它显示所需的错误，但输入不为空）

这是模型：

export const formData = [
  {
    id: 1,
    type: "text",
    labelRequired: true,
    label: "name",
    shape: "inline",
    placeholder: "name",
    name: "nameOne",
    validation: {
      required: true,
      minLength: 8,
    },
    size: 6,
  },
  {
    id: 2,
    type: "text",
    labelRequired: true,
    label: "family",
    shape: "inline",
    placeholder: "family",
    name: "nameTwo",
    validation: {
      required: true,
      minLength: 8,
    },
    size: 6,
  },
  {
    id: 7,
    type: "checkbox",
    label: "Sample",
    shape: "checkbox",
    placeholder: "placeholder",
    name: "checkbox_btn",
    data: [
      {
        id: 41,
        inputId: "inline-form-1",
        label: "1", …

提交表单后出现错误：
TypeError: e.preventDefault is not a function。

这是我的代码：

import {React} from 'react';
import emailjs from 'emailjs-com';
import {useForm} from "react-hook-form";

const NameForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);

      }, (error) => {
          console.log(error.text);
      });
      e.target.reset();
  }

    return (
      <div>
        <h1 className="text-center text-md-left mb-3">Get in Touch</h1>
        <form className="contact-form" onSubmit={handleSubmit(sendEmail)}>
          <div className="form-group mb-0 py-3">
            <textarea className="form-control custom--fields-mod text-the-primary" …

在我的 React（w/ typescript）应用程序中，我使用react-hook-form 创建了一个表单来管理它的所有逻辑。

然后我用一些 css 和其他东西自定义了 select 元素。但是，为了问题简单起见，这里是准系统组件：

import { forwardRef } from 'react';

type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;

const Select = forwardRef<HTMLSelectElement, Props>((props, ref) => {
    return (
        <select ref={ref} {...props}>
            <option value="">...</option>
            {props.children}
        </select>
    );
});

export default Select;

然后，我定义了另一个“专门化”前一个组件的组件，如下所示：

import { forwardRef } from 'react';

import Select from './select';

type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> & { label: string; errors?: string };

const SelectWitLargeData = forwardRef<HTMLSelectElement, Props>((props, ref) => {
    return (
        <Select ref={ref} {...props}>
           ...large amount …

我正在使用react-hook-form制作一个简单的文件上传表单，我需要验证是否已选择上传文件。使用 yup 进行验证。我意识到关于这个主题还有其他问题，但我无法找到可行的解决方案。

我的文件上传组件基于（几乎100%相同）这个答案/sf/answers/4796342281/。它似乎工作得很好，如果我禁用验证，文件就会正确上传。

我面临的问题是在验证是否已选择文件时出现错误file must be a 'object' type, but the final value was: 'null'。

这是显示问题的CodeSandbox 。我添加了一些打印内容，显示“文件”表单属性的内容及其类型（显示为对象）

useWatch 和useForm中的watch有什么区别？

库-react-hook-form

当我尝试制作博客时，我无法通过表单中的编辑器。我找到了这个：

DraftJS React-Hook-Form - 提交编辑器作为输入

但似乎 LexicalRichTextEditor 没有这样的标签可以传递。谁能帮我？如何传递属性来实现添加内容和修改内容功能？

type LexicalEditorProps = {
    //config: Parameters<typeof LexicalComposer>["0"]["initialConfig"];
    content: any;
};

export default function MyEditor(props: LexicalEditorProps) {
    const [ editor ] = useLexicalComposerContext();
    const editorStateRef = useRef();
    const [saveContent, setSaveContent] = useState('');
    const editorConfig: any = {
        // The editor theme
        theme: EditorTheme,
        // Handling of errors during update
        onError(error: any) {
            throw error;
        },
        editorState: props.content,
        // Any custom nodes go here
        nodes: [
            HeadingNode,
            ListNode,
            ListItemNode,
            QuoteNode,
            CodeNode,
            CodeHighlightNode,
            TableNode,
            TableCellNode, …