web-dev-qa-db-ja.com

React AntDスタイルのフックフォーム

私はantdフロントエンドでreact-hook-formを使用する方法を理解しようとしています。

私はこのフォームを作成しましたが、エラーメッセージが表示されないことを除いて、機能しているようです（マルチパートフォームウィザードのパート1です）。

これらの2つのフォームシステムをマージするときに私が間違ったことを誰かが見ることができますか？

エラーは発生していませんが、両方のフォームフィールドを必須にするように要求したと思いますが、入力せずに送信を押すと、エラーメッセージが表示されません。

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

反応フック形式の著者はこちら。 Antd入力コンポーネントは実際には内部refを公開していないため、register中にuseEffectを実行し、onChange中に値を更新する必要があります。例：

const { register, setValue } = useForm();

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

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

私は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

そのようなコードを書くとき：

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

Input参照がinputにバインドされていると想定しているが、そうではない。

実際、それをinputRef.inputにバインドする必要があります。

次のコードで確認できます。

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

antdは完全なUIライブラリであることに注意してください（サードパーティの「ヘルパー」を使用すると、「赤信号」になるはずです）。特に、Formにはバリデーターが実装されているため、 docs のさまざまな例。

1
Dennis Vash

Antによって提供されるフォーム入力のデフォルトスタイルに近づくことにまだ興味がある場合は、次のようにして動作させます。

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>
    );
}

コードサンドボックスのサンプル

0
Simeon Simeonoff

これは私の作業アプローチです：

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