在页面上可以输入显示笔记,也可以删除,笔记(note)=标题(title)+内容(body):
import React, { useState } from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
const NoteApp = () => {
const [notes, setNotes] = useState([]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const addNote = (e) => {
e.preventDefault();
setNotes([...notes, { title, body }]);
setTitle("");
setBody("");
};
const removeNote = (title) => {
setNotes(notes.filter((n) => n.title !== title));
};
return (
<div>
<h1>Notes</h1>
{notes.map((note) => (
<div key={note.title}>
<h3>{note.title}</h3>
<p>{note.body} </p>
<button onClick={() => removeNote(note.title)}>X</button>
</div>
))}
<p>================ Add note =============</p>
<form onSubmit={addNote}>
<input value={title} onChange={(e) => setTitle(e.target.value)} />
<textarea value={body} onChange={(e) => setBody(e.target.value)} />
<button>add note</button>
</form>
</div>
);
};
// const App = (props) => {
// const [count, setCount] = useState(props.count);
// const [text, setText] = useState("");
// return (
// <div>
// <p>
// The current {text || "count"} is {count}
// </p>
// <button onClick={() => setCount(count - 1)}>-1</button>
// <button onClick={() => setCount(props.count)}>reset</button>
// <button onClick={() => setCount(count + 1)}>+1</button>
// <input value={text} onChange={e=>setText(e.target.value)}></input>
// </div>
// );
// };
ReactDOM.render(
<React.StrictMode>
<NoteApp />
</React.StrictMode>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();