当点击新建笔记按钮时，它不会弹出表单。无法弄清楚缺少什么

Question

我附上了我的表单组件和笔记组件的代码。尝试单击“新建”按钮，但不会弹出表单或 console.log anythingimport React from “react”；

 function NoteForm() {
  console.log("Form");
  return (
    <div>
      <form>
        <input type="text" placeholder="title"></input>
        <textarea></textarea>
        <button>Submit</button>
      </form>
    </div>
  );
}

export default NoteForm;


import React from "react";
import { deleteNote } from "../CRUD/noteFunction.js";
import NoteForm from "./noteForm.js";

function Notes({ Note }) {
  return (
    <main className="page">
      <h2 className="page__title">Notes</h2>
      <button onClick={() => { return <NoteForm />}} className="btn--gray">
        NEW NOTE +
      </button>
    </main>
  );
}

export default Notes;

Answer 1

你实际上并没有渲染 NoteForm。 做类似的事情，

import React, { useState } from "react";
import { deleteNote } from "../CRUD/noteFunction.js";
import NoteForm from "./noteForm.js";

function Notes({ Note }) {
  const [showForm, setShowForm] = useState(false);

  const handleNewNoteClick = () => {
    setShowForm(true);
  };

  return (
    <main className="page">
      <h2 className="page__title">Notes</h2>
      <button onClick={handleNewNoteClick} className="btn--gray">
        NEW NOTE +
      </button>
      {showForm && <NoteForm />}
    </main>
  );
}

export default Notes;