使用 React 鈎子表單進行表單驗證

Question

我想在調用onClick function 之前驗證我的 forms。 我使用react-hook-form組件來實現表單驗證。 但是，它似乎不起作用。 即使當我點擊按鈕時表單是空的，也會創建一個空組件。

我是反應初學者。 這個項目來自 Udemy 課程，我想進行一些改進，即表單驗證。

import React, { useState } from "react";
import AddIcon from "@material-ui/icons/Add";
import Fab from "@material-ui/core/Fab";
import Zoom from "@material-ui/core/Zoom";
import { useForm } from "react-hook-form";

function CreateArea(props) {

  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  const [createNote, setCreateNote] = useState({
    title: "",
    content: "",
  });

  const [isExpanded, setIsExpanded] = useState(false);

  
  function updateChange(event) {
    const { name, value } = event.target;
    setCreateNote((prevNote) => {
      return {
        ...prevNote,
        [name]: value,
      };
    });
  }

  function submitNote(event) {
    props.onAdd(createNote);
    setCreateNote({
      title: "",
      content: "",
    });
    event.preventDefault();
  }

  function expand(){
    setIsExpanded(true);
  }

  return (
    
    <div>
      <form onSubmit={handleSubmit(onSubmit)} className="create-note" >
        {isExpanded && <input
          onChange={updateChange}
          value={createNote.title}
          name="title"
          placeholder="Title"
          ref={register({ required: true ,maxLength: 15 })}
        />}
        {errors.title && <p>Title is required</p>}

        <textarea
          onClick={expand}
          onChange={updateChange}
          value={createNote.content}
          name="content"
          placeholder="Take a note..."
          rows={isExpanded ? "3" : "1"}
          ref={register({ required: true })}
        />
        {errors.content && <p>Content is required</p>}
        
        <Zoom in={isExpanded}>
          <Fab type="submit" onClick={submitNote}>
            <AddIcon />
          </Fab>
        </Zoom>

      </form>
    </div>
  );
}

export default CreateArea;

Answer 1

我不確定我是否完全理解了這個問題，但是如果您想驗證展開function 中的表單，並根據它是否有效采取行動，react-hook-form 有一個triggerValidation function 返回一個 ZC1C425268E6890DEB329DE39D5E目的。

const { triggerValidation } = useForm();

function expand() {
    triggerValidation().then(valid => {
        if (valid) {
            setIsExpanded(true);
        }
    });
}