Javascript React onClick函数调用刷新应用程序

我正在做一个谷歌keepnote风格的简单笔记应用程序。当我按下createare组件中的add按钮时，它会调用app组件中的函数，该函数将注释添加到数组中进行渲染。函数调用工作正常，但随后整个应用程序刷新，所有数据丢失

我想不出是什么原因导致了刷新

应用程序组件：

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

function App() {
  const [notes, setNotes] = useState({ id: "", title: "", content: "" });

  function addNote(note) {
    console.log(note);
  }

  return (
    <div>
      <Header />
      <CreateArea newNote={addNote} />
      <Note key={1} title="Note title" content="Note content" />
      <Footer />
    </div>
  );
}

export default App;

import React, { useState } from "react";

function CreateArea(props) {
  const [note, setNote] = useState({ title: "", content: "" });

  function handleChange(event) {
    if (event === null || event === undefined) return;

    const { name, value } = event.target;

    if (name === "title") {
      setNote(prevValue => {
        return {
          title: value,
          content: prevValue.content
        };
      });
    } else {
      setNote(prevValue => {
        return {
          title: prevValue.title,
          content: value
        };
      });
    }
  }

  return (
    <div>
      <form>
        <input onChange={handleChange} name="title" placeholder="Title" />
        <textarea
          onChange={handleChange}
          name="content"
          placeholder="Take a note..."
          rows="3"
        />
        <button
          onClick={() => {
            props.newNote(note);
          }}
        >
          Add
        </button>
      </form>
    </div>
  );
}

export default CreateArea;

function addNote(e,note) {
    e.preventDefault()  // prevent the default behavior
    console.log(note);
  }

CreateArea组件：

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

function App() {
  const [notes, setNotes] = useState({ id: "", title: "", content: "" });

  function addNote(note) {
    console.log(note);
  }

  return (
    <div>
      <Header />
      <CreateArea newNote={addNote} />
      <Note key={1} title="Note title" content="Note content" />
      <Footer />
    </div>
  );
}

export default App;

import React, { useState } from "react";

function CreateArea(props) {
  const [note, setNote] = useState({ title: "", content: "" });

  function handleChange(event) {
    if (event === null || event === undefined) return;

    const { name, value } = event.target;

    if (name === "title") {
      setNote(prevValue => {
        return {
          title: value,
          content: prevValue.content
        };
      });
    } else {
      setNote(prevValue => {
        return {
          title: prevValue.title,
          content: value
        };
      });
    }
  }

  return (
    <div>
      <form>
        <input onChange={handleChange} name="title" placeholder="Title" />
        <textarea
          onChange={handleChange}
          name="content"
          placeholder="Take a note..."
          rows="3"
        />
        <button
          onClick={() => {
            props.newNote(note);
          }}
        >
          Add
        </button>
      </form>
    </div>
  );
}

export default CreateArea;

function addNote(e,note) {
    e.preventDefault()  // prevent the default behavior
    console.log(note);
  }

---

任何帮助都将不胜感激。

您需要防止表单提交的默认行为

在OnClick事件中，将事件作为参数传递：

<button
      onClick={(e) => {
        props.newNote(e,note);
      }}
    >
      Add
    </button>

---

您需要防止表单提交的默认行为

在OnClick事件中，将事件作为参数传递：

<button
      onClick={(e) => {
        props.newNote(e,note);
      }}
    >
      Add
    </button>

---

这是因为您正在单击表单中的按钮。表单正在尝试提交，这将刷新页面。您可以添加e.preventDefault来停止该操作

{ e、 防止违约 props.newnote； }} >

---

这是因为您正在单击表单中的按钮。表单正在尝试提交，这将刷新页面。您可以添加e.preventDefault来停止该操作

{ e、 防止违约 props.newnote； }} >