web-dev-qa-db-ja.com

react-hook-formをコンポーネントに構成する方法

初めてreact-hook-form（ https://react-hook-form.com/ ）を使おうとしています。それらをreduxと反応するコンポーネントに構成する方法がわかりません。

import React from 'react'
import useForm from 'react-hook-form'

export default function SampleForm() {
    const { register, handleSubmit, watch, errors } = useForm()
    const onSubmit = data => { console.log(data) }

    console.log(watch('example')) // watch input value by passing the name of it

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input name="example" defaultValue="test" ref={register} />
            <input name="exampleRequired" ref={register({ required: true })} />
            {errors.exampleRequired && <span>This field is required</span>}
            <input type="submit" />
        </form>
    );
}

import React, { Component } from "react";
import { connect } from "react-redux";
import userForm from 'react-hook-form';
import SampleForm from "./SampleForm";

class Sample extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <SampleForm />
        );
    }
}

export default connect()(Sample);

誰か助けてくれますか？

reactjsreact-hook-form
2
tajihiro

プロのヒント：ほとんどの十分にサポートされているライブラリのGithubリポジトリにサンプルディレクトリがあります。以前に使用したことのないライブラリの実装に苦労しているときは、 例 の1つを見るだけです。

このように素晴らしい 例 ：

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from "react-redux";
import useForm from 'react-hook-form';

function SampleForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <input name="firstName" placeholder="bill" ref={register} />
        </div>

        <div>
          <label htmlFor="lastName">Last Name</label>
          <input name="lastName" placeholder="luo" ref={register} />
        </div>

        <div>
          <label htmlFor="email">Email</label>
          <input name="email" placeholder="[email protected]" type="email" ref={register} />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

class Sample extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <SampleForm />;
  }
}

export default connect()(Sample);

const rootElement = document.getElementById('root');
ReactDOM.render(<Sample />, rootElement);
2
Jurrian