Reactjs 使用React钩子表单进行表单验证

我想在调用onClick函数之前验证表单。我已经使用react-hook表单组件来实现表单验证。然而，它似乎不起作用。即使表单为空，如果单击按钮，也会创建一个空组件

我是个反应的新手。 这个项目是我课程的一部分，我想做一些改进，比如表单验证

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;

---

我不确定我是否完全理解了这个问题，但是如果您想在expand函数中验证表单，并决定它是否有效，react hook表单有一个triggerValidation函数，它返回一个用于此目的的承诺

const { triggerValidation } = useForm();

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

---

尝试从Fab组件中删除onClick。没有必要。我正在使用onClick方法将值传递给另一个组件。您可以在onSubmit函数中执行此操作。您甚至不必维护本地状态。我会帮你的。你的代码可以简单到哦，好的。成功了。谢谢