web-dev-qa-db-fra.com

React Hook Form with AntD Styling

J'essaie de comprendre comment utiliser react-hook-form avec antd front end.

J'ai créé ce formulaire et il semble fonctionner (c'est la partie 1 d'un assistant de formulaire en plusieurs parties) sauf que les messages d'erreur ne s'affichent pas.

Quelqu'un peut-il voir ce que j'ai fait de mal en fusionnant ces deux systèmes de formulaires?

Je ne reçois aucune erreur, mais je pense avoir demandé que les deux champs du formulaire soient obligatoires mais si j'appuie sur Soumettre sans les compléter, les messages d'erreur ne s'affichent pas.

import React from "react";
import useForm from "react-hook-form";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { StateMachineProvider, createStore } from "little-state-machine";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";

import updateAction from "./updateAction";
import { Button, Form, Input,  Divider, Layout, Typography, Skeleton, Switch, Card, Icon, Avatar } from 'antd';


const { Content } = Layout 
const { Text, Paragraph } = Typography;
const { Meta } = Card;

createStore({
  data: {}
});

const General = props => {
  const { register, handleSubmit, errors } = useForm();
  const { action } = useStateMachine(updateAction);
  const onSubit = data => {
    action(data);
    props.history.Push("./ProposalMethod");
  };


  return (

      <div>

        <Content
          style={{
            background: '#fff',
            padding: 24,
            margin: "auto",
            minHeight: 280,
            width: '70%'
          }}
        >
        <Form onSubmit={handleSubmit(onSubit)}>

          <h2>Part 1: General</h2>
            <Form.Item label="Title" >
              <Input 
                name="title" 
                placeholder="Add a title" 
                ref={register({ required: true })} 
              />
              {errors.title && 'A title is required.'}
            </Form.Item>
            <Form.Item label="Subtitle" >
              <Input 
                name="subtitle" 
                placeholder="Add a subtitle" 
                ref={register({ required: true })} 
              />
              {errors.subtitle && 'A subtitle is required.'}
            </Form.Item>
            <Form.Item>
              <Button type="secondary" htmlType="submit">
                Next
              </Button>
            </Form.Item>

        </Form>

        </Content>
      </div>  
  );
};

export default withRouter(General);
reactjsreact-hooksantdreact-hook-form
2
Mel

réagir-crochet-formulaire auteur ici. Le composant Antd Input n'expose pas vraiment ref interne, vous devrez donc register pendant useEffect, et mettre à jour la valeur pendant onChange, par exemple:

const { register, setValue } = useForm();

useEffect(() => {
  register({ name: 'yourField' }, { required: true });
}, [])

<Input name="yourField" onChange={(e) => setValue('yourField', e.target.value)}

j'ai construit un composant wrapper pour faciliter l'intégration des composants antd: https://github.com/react-hook-form/react-hook-form-input

import React from 'react';
import useForm from 'react-hook-form';
import { RHFInput } from 'react-hook-form-input';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'Vanilla', label: 'Vanilla' },
];

function App() {
  const { handleSubmit, register, setValue, reset } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <RHFInput
        as={<Select options={options} />}
        rules={{ required: true }}
        name="reactSelect"
        register={register}
        setValue={setValue}
      />
      <button
        type="button"
        onClick={() => {
          reset({
            reactSelect: '',
          });
        }}
      >
        Reset Form
      </button>
      <button>submit</button>
    </form>
  );
}
2
Bill

Lors de l'écriture de ce code:

<Input
  name="subtitle"
  placeholder="Add a subtitle"
  ref={register({ required: true })}
/>

Vous supposez que la référence Input est liée à input, mais ce n'est pas vrai.

En fait, vous devez le lier à inputRef.input.

Vous pouvez le vérifier avec le code suivant:

const App = () => {
  const inputRef = useRef();
  const inputRefHtml = useRef();

  useEffect(() => {
    console.log(inputRef.current);
    console.log(inputRefHtml.current);
  });

  return (
    <FlexBox>
      <Input ref={inputRef} />
      <input ref={inputRefHtml} />
    </FlexBox>
  );
};

# Logs
Input {props: Object, context: Object, refs: Object, updater: Object, saveClearableInput: function ()…}

<input></input>

Edit Q-58703615-3rdPartyInAnt

Notez que antd est une bibliothèque d'interface utilisateur complète (l'utilisation de "helpers" tiers devrait "allumer un feu rouge"), en particulier, Form a un validateur implémenté, vous pouvez voir ne variété d'exemples dans la documentation .

1
Dennis Vash

Si quelqu'un souhaite toujours se rapprocher des styles par défaut des entrées de formulaire fournies par Ant, voici comment je l'ai fait fonctionner:

import { Form, Button, Input } from 'antd';
import { useForm, Controller } from 'react-hook-form';

function MyForm() {
    const { control, handleSubmit, errors, setValue } = useForm();
    const emailError = errors.email && 'Enter your email address';

    const onSubmit = data => { console.log(data) };

    const EmailInput = (
        <Form.Item>
            <Input
                type="email"
                placeholder="Email"
                onChange={e => setValue('email', e.target.value, true)}
                onBlur={e => setValue('email', e.target.value, true)}
            />
        </Form.Item>
    );


    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <Controller 
                as={EmailInput} 
                name="email" 
                control={control} 
                defaultValue=""
                rules={{
                    required: true
                }}
                validateStatus={emailError ? 'error' : ''}
                help={emailError}
            />

            <Button block type="primary" htmlType="submit">
                Submit
            </Button>
        </form>
    );
}

exemple de code et de boîte

0
Simeon Simeonoff

Voici mon approche de travail:

const Example = () => {

 const { control, handleSubmit, errors } = useForm()

  const onSubmit = data => console.log(data)
  console.log(errors)

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="email"
        control={control}
        rules={{ required: "Please enter your email address" }}
        as={
          <Form.Item
            label="name"
            validateStatus={errors.email && "error"}
            help={errors.email && errors.email.message}
          >
            <Input />
          </Form.Item>
        }
      />
      <Button htmlType="submit">Submit</Button>
    </Form>
  )
}
0
gonzarodriguezt