目录
Conditional/Ternary operator and &&
State in react --imperative or declarative
Source
Web Development Course Resources | The App Brewery
Expression and statement:
Expression:always return something
const u = getvalue();
const u = 1;
Statement
if(u>2){
return
}
while(u>2){
return
}
for(let i = 0 ;i<n;i++){
return
}
ES6中 template literals
Template literals are literals delimited with backtick (`
) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
LIke the template:
`string text ${expression} string text`
tagFunction`string text ${expression} string text`
Code
<h1>Hello {`${name}${nums}`}</h1>
Template literals (Template strings) - JavaScript | MDN
React styling:
主要就是一个内容:
可以通过设定变量,修改变量的值,然后使用ejs应用再html中
//Create a React app from scratch.
//Show a single h1 that says "Good morning" if between midnight and 12PM.24-12
//or "Good Afternoon" if between 12PM and 6PM. 12-18
//or "Good evening" if between 6PM and midnight. 18-24
//Apply the "heading" style in the styles.css
//Dynamically change the color of the h1 using inline css styles.
//Morning = red, Afternoon = green, Night = blue.
import React from "react";
import * as ReactDOM from "react-dom";
const date = new Date();
const currentTime = date.getHours();
let greeting;
const customStyle = {
color: ""
};
if (currentTime < 12) {
greeting = "Good Morning";
customStyle.color = "red";
} else if (currentTime < 18) {
greeting = "Good Afternoon";
customStyle.color = "green";
} else {
greeting = "Good Night";
customStyle.color = "blue";
}
ReactDOM.render(
<h1 className="heading" style={customStyle}>
{greeting}
</h1>,
document.getElementById("root")
);
Component 形式写的
import React from "react";
import ReactDOM from "react-dom";
var today = new Date();
var time = today.getHours();
const redStyle = {
color: 'red'
}
const greenStyle = {
color: 'green'
}
const blueStyle = {
color: 'blue'
}
const Get = function(time){
if(time >0 && time <12){
return <h1 className="heading" style={redStyle}>Good morning</h1>
}else if(time >=12 && time <=18){
return <h1 className="heading" style={greenStyle}>Good Afternoon</h1>
}else{
return <h1 className="heading" style={blueStyle}>Good evening</h1>
}
}
ReactDOM.render(
<Get />
, document.getElementById("root")
)
React Components
How to make a components?
We can use function like Heading and then use <Heading />to cite components in the reactdom.render
import React from "react";
import ReactDOM from "react-dom";
function Heading(){
return <h1>My Favourite Foods</h1>
}
ReactDOM.render(
<div>
<Heading />
<ul>
<li>Bacon</li>
<li>Jamon</li>
<li>Noodles</li>
</ul>
</div>,
document.getElementById("root")
);
Using Jsx to make a components.
Firstly, create jsx file
and then write a function in the jsx file, next it needs to export funcition
List.jsx
import React from "react";
function List() {
return (
<div>
<ul>
<li>Bacon</li>
<li>Jamon</li>
<li>Noodles</li>
</ul>
</div>
);
}
export default List;
In the main js file(index.js)
Need to import components into the file.
and use <List />..
import React from "react";
import ReactDOM from "react-dom";
import Heading from "./Heading.jsx";
import List from "./List.jsx";
ReactDOM.render(
<div>
<Heading />
<List />
</div>,
document.getElementById("root")
);
How to write statement in the jsx file
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("root"));
We can use some expression and return html in the file
Heading.jsx
import React from "react";
function Heading() {
const date = new Date();
const currentTime = date.getHours();
let greeting;
const customStyle = {
color: ""
};
if (currentTime < 12) {
greeting = "Good Morning";
customStyle.color = "red";
} else if (currentTime < 18) {
greeting = "Good Afternoon";
customStyle.color = "green";
} else {
greeting = "Good Night";
customStyle.color = "blue";
}
return (
<h1 className="heading" style={customStyle}>
{greeting}
</h1>
);
}
export default Heading;
App.jsx
import React from "react";
import Heading from "./Heading.jsx";
function App() {
return (
<div>
<Heading />)
</div>
);
}
export default App;
Import and export and modules
We can use "import" to import something and we also can use var react = require("react") to import modules.
Import is EJS/ Require is node.js.They all can import modules. But we use "import " to import modules to be better. Because our web services all can be accepted.
we put a list of what to import in curly braces import {...}
, like this:
index.js
import React from "react";
import ReactDOM from "react-dom";
import pi, { doublePi, triplePi } from "./math.js";
// import * as Pi from "./math.js"; it is return an object
ReactDOM.render(
<ul>
//<li>{Pi.pi}</li>
// <li>{Pi.doublePi()}</li>
// <li>{Pi.triplePi()}</li>
<li>{pi}</li>
<li>{doublePi()}</li>
<li>{triplePi()}</li>
</ul>,
document.getElementById("root")
);
Math.js
default just only one ,so we could change the name about the default varibale.
const pi = 3.1415926;
function doublePi() {
return pi * 2;
}
function triplePi() {
return pi * 3;
}
export default pi;
export { doublePi, triplePi };
Notice:
when you write components,it would be better to capitalise initial character.
App.jsx
import React from "react";
import Footer from "./Footer";
import Note from "./Note";
import Header from "./Header";
function App(){
return (
<div>
<Header />
<Note />
<Footer />
</div>
)
};
export default App;
React props
When you write components,you want to reuse your components.Properties come in handy.
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("root"));
App.jsx
import React from "react";
import Card from "./Card";
import contacts from "../contacts";
function App() {
return (
<div>
<h1 className="heading">My Contacts</h1>
<Card
name={contacts[0].name}
url={contacts[0].imgURL}
tel={contacts[0].phone}
ema={contacts[0].email}
/>
<Card
name={contacts[1].name}
url={contacts[1].imgURL}
tel={contacts[1].phone}
ema={contacts[1].email}
/>
<Card
name={contacts[2].name}
url={contacts[2].imgURL}
tel={contacts[2].phone}
ema={contacts[2].email}
/>
</div>
);
}
export default App;
Components!!
Card.jsx
import React from "react";
function Card(props) {
return (
<div className="card">
<div className="top">
<h2 className="name">{props.name}</h2>
<img className="circle-img" src={props.url} alt="avatar_img" />
</div>
<div className="bottom">
<p className="info">{props.tel}</p>
<p className="info">{props.ema}</p>
</div>
</div>
);
}
export default Card;
contacts.js
const contacts = [
{
name: "Beyonce",
imgURL:
"https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",
phone: "+123 456 789",
email: "b@beyonce.com"
},
{
name: "Jack Bauer",
imgURL:
"https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg",
phone: "+987 654 321",
email: "jack@nowhere.com"
},
{
name: "Chuck Norris",
imgURL:
"https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png",
phone: "+918 372 574",
email: "gmail@chucknorris.com"
}
];
export default contacts;
Mapping data to components
how to use loop in the components?
What matters is that the actual content has some unique identifier in case the elements are rerendered in a different order. index
is almost always incorrect because indices are always ordered numerically where data is practically guaranteed not to be.
"Map" function can loop one object.
If you want to use the unique id,you need to create a custom proporty.
App.jsx
import React from "react";
import Card from "./Card";
import contacts from "../contacts";
function createCard(contact) {
return (
<Card
id={contact.id}
key={contact.id}
name={contact.name}
img={contact.imgURL}
tel={contact.phone}
email={contact.email}
/>
);
}
function App() {
return (
<div>
<h1 className="heading">My Contacts</h1>
{contacts.map(createCard)}
</div>
);
}
export default App;
Mapping Pratices
App.jsx
import React from "react";
import Entry from "./Entry";
import emojipedia from "../emojipedia";
// create entry components
// create props to replace hardcoded data
// import emojipedia const
// map through the emojipedia array and render Entry components
function createList(list) {
return (
<Entry
key={list.id}
emoji={list.emoji}
name={list.name}
meaning={list.meaning}
/>
);
}
function App() {
return (
<div>
<h1>
<span>emojipedia</span>
</h1>
<dl className="dictionary">{emojipedia.map(createList)}</dl>
</div>
);
}
export default App;
Entry.jsx
import React from "react";
function Entry(props) {
return (
<div className="term">
<dt>
<span className="emoji" role="img" aria-label="Tense Biceps">
{props.emoji}
</span>
<span>{props.name}</span>
</dt>
<dd>{props.meaning}</dd>
</div>
);
}
export default Entry;
emojipedia.js
const emojipedia = [
{
id: 1,
emoji: "💪",
name: "Tense Biceps",
meaning:
"“You can do that!” or “I feel strong!” Arm with tense biceps. Also used in connection with doing sports, e.g. at the gym."
},
{
id: 2,
emoji: "🙏",
name: "Person With Folded Hands",
meaning:
"Two hands pressed together. Is currently very introverted, saying a prayer, or hoping for enlightenment. Is also used as a “high five” or to say thank you."
},
{
id: 3,
emoji: "🤣",
name: "Rolling On The Floor, Laughing",
meaning:
"This is funny! A smiley face, rolling on the floor, laughing. The face is laughing boundlessly. The emoji version of “rofl“. Stands for „rolling on the floor, laughing“."
}
];
export default emojipedia;
Map/Filler/Reduce
var numbers = [3, 56, 2, 48, 5];
//Map -Create a new array by doing something with each item in an array.
const result_map = numbers.map(function Multiplys(x) {
return x * 2;
});
console.log(result_map);
//Filter - Create a new array by keeping the items that return true.
const result_filter = numbers.filter(function (x) {
return x > 3;
});
console.log(result_filter);
//Reduce - Accumulate a value by doing something to each item in an array.
const result_reduce = numbers.reduce(function (accumulator, currentvalue) {
return accumulator + currentvalue;
});
console.log(result_reduce);
//Find - find the first item that matches from an array.
const result_find = numbers.find(function (num) {
return num > 10;
});
console.log(result_find);
//FindIndex - find the index of the first item that matches.
const result_index = numbers.findIndex(function (num) {
return num > 10;
});
console.log(result_index);
Arrow function
var numbers = [3, 56, 2, 48, 5];
Map -Create a new array by doing something with each item in an array.
const newNumbers1 = numbers.map((x) => x * 2);
就是将函数全部改成匿名函数,将return 改为'=>'符号
ES6 In Depth: Arrow functions - Mozilla Hacks - the Web developer blog
Conditional/Ternary operator and &&
Conditional/Ternary operator
Syntax
condition ? exprIfTrue : exprIfFalse
It means:
if (condition){
True
}else{
False
}
Example:
const age = 26;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"
Logical AND (&&) in react
Syntax:
condition && expression
true && expression
false && expression(no express)
State in react --imperative or declarative
You probably have seen that React is declarative.
imperative example(就是你说啥,他做啥,比较死板)
const container = document.getElementById('container');
const btn = document.createElement('按钮');
btn.className = 'btn 红';
btn.onclick = function(event) {
if (this.classList.contains('red')) {
this.classList.remove('red');
this.classList.add('blue');
} else {
this.classList.remove('blue');
this.classList.add('红色');
}
};
container.appendChild(btn);
our declarative React example
class Button extends React.Component{
this.state = { color: 'red' }
handleChange = () => {
const color = this.state.color === 'red' ? 'blue' : 'red';
this.setState({ color });
}
render() {
return (<div>
<button
className=`btn ${this.state.color}`
onClick={this.handleChange}>
</button>
</div>);
}
}
https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
React Hooks-use State
当我们想点击一个按钮,然后更新一下点击数量,需要建立函数去更新count,还需要React render,这非常麻烦。
what means?
import React from "react";
import ReactDOM from "react-dom";
var count = 3;
function increase() {
count++;
console.log(count);
}
ReactDOM.render(
<div className="container">
<h1>0</h1>
<button onClick={increase}>+</button>
</div>,
document.getElementById("root")
);
没有办法直接显示在页面,需要render 一下reactdom
import React from "react";
import ReactDOM from "react-dom";
var count = 0;
function increase() {
count++;
ReactDOM.render(
<div className="container">
<h1>{count}</h1>
<button onClick={increase}>+</button>
</div>,
document.getElementById("root")
);
}
ReactDOM.render(
<div className="container">
<h1>0</h1>
<button onClick={increase}>+</button>
</div>,
document.getElementById("root")
);
此时我们可以用上函数useState(),就再也不用使用reactdom.render,more efficient.
就是说,使用array destructuring来记录count 和 setcount
import React, { useState } from "react";
function App() {
const [count, setCount] = useState(0);
function increase() {
setCount(count + 1);
}
function decrease() {
setCount(count - 1);
}
return (
<div className="container">
<h1>{count}</h1>
<button onClick={increase}>+</button>
<button onClick={decrease}>-</button>
</div>
);
}
export default App;
Common Mistakes
Good
<button onClick={sayHello}>
Click me!
</button>
Bad
<button onClick={sayHello()}>
Click me!
</button>
good!
<button onClick={() => functionName())}>
Click me!
</button>
Bad
<button onClick={() => functionName}>
Click me!
</button>
React onClick Event Handling (With Examples) - Upmostly
Pratice:
//Challenge:
//1. Given that you can get the current time using:
// let time = new Date().toLocaleTimeString();
// console.log(time);
//Show the latest time in the <h1> when the Get Time button
//is pressed.
//2. Given that you can get code to be called every second
//using the setInterval method.
//Can you get the time in your <h1> to update every second?
//e.g. uncomment the code below to see Hey printed every second.
// function sayHi() {
// console.log("Hey");
// }
// setInterval(sayHi, 1000);
Answer:
import React, { useState } from "react";
function App() {
setInterval(getnewTime, 1000);
let now = new Date().toLocaleTimeString();
const [time, setTime] = useState(now);
function getnewTime() {
let newTime = new Date().toLocaleTimeString();
setTime(newTime);
}
function sayHi() {
console.log("Hey");
}
return (
<div className="container">
<h1>{time}</h1>
<button onClick={getnewTime}>Get Time</button>
</div>
);
}
Array destructuring
// destructuring Array
const [cat, dog] = animals;
// destructuring object
// const { name, sound } = cat;
// const { name: catname, sound: catsount } = cat;
// const { name = "fluddy", sound = "iiii" } = cat;
Destructuring assignment - JavaScript | MDN
Event Handling in React
我们需要实现,当你的鼠标放在button上面的时候,他的颜色会从黑变成白色
这里很巧妙,使用了true和false 来标记状态
还是用了多元运算符来判断
import React, { useState } from "react";
function App() {
const [headingText, setheadingText] = useState("Hello");
const [isMouseOver, setIsMouseOver] = useState(false);
function handleClick() {
setheadingText("Submitted");
}
function handleMouseOver() {
setIsMouseOver(true);
}
function handleMouseOut() {
setIsMouseOver(false);
}
return (
<div className="container">
<h1>{headingText}</h1>
<input type="text" placeholder="What's your name?" />
<button
onClick={handleClick}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
style={{ backgroundColor: isMouseOver ? "black" : "white" }}
>
Submit
</button>
</div>
);
}
export default App;
React Forms
点击表单,触发click事件有两种方法
第一个是设置button 的onclick事件
<button onClick={handleClick}>Submit</button>
第二种是使用form表单的属性
onsubmit 属性
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
const [headingText, setHeading] = useState("");
function handleChange(event) {
setName(event.target.value);
}
function handleClick() {
setHeading(name);
}
return (
<div className="container">
<h1>Hello {headingText}</h1>
<form onSubmit={handleClick}>
<input
onChange={handleChange}
type="text"
placeholder="What's your name?"
value={name}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
export default App;
但是他会刷新事件,过几秒钟,就刷新一下
function handleClick(event) {
setHeading(name);
event.preventDefault();
}
完整代码
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
const [headingText, setHeading] = useState("");
function handleChange(event) {
setName(event.target.value);
}
function handleClick(event) {
setHeading(name);
event.preventDefault();
}
return (
<div className="container">
<h1>Hello {headingText}</h1>
<form onSubmit={handleClick}>
<input
onChange={handleChange}
type="text"
placeholder="What's your name?"
value={name}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
export default App;
Class Component/functional Component
import React, { useState } from "react";
function FunctionalComponent() {
const [count, setCount] = useState(0);
function increase() {
setCount(count + 1);
}
return (
<div>
<h1>{count}</h1>
<button onClick={increase}>+</button>
</div>
);
}
export default FunctionalComponent;
ClassComponent:
import React from "react";
class ClassComponent extends React.Component {
constructor() {
super();
this.state = {
count: 0
};
this.increase = this.increase.bind(this);
}
increase() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.increase}>+</button>
</div>
);
}
}
export default ClassComponent;
这两种component的效果都是一样的。Classcomponents中的render( )用来返回html元素
Changing complex state
在useState建立object对象,可以直接更新三个元素
event.target.name 代表的是fName,这种元素。
然后需要同时更新三个值,不然的话,会被全部清零
import React, { useState } from "react";
function App() {
const [contact, setContact] = useState({
fName: "",
lName: "",
email: ""
});
function handleChange(event) {
const { name, value } = event.target;
setContact((prevValue) => {
if (name === "fName") {
return {
fName: value,
lName: prevValue.lName,
email: prevValue.email
};
} else if (name === "lName") {
return {
fName: prevValue.fName,
lName: value,
email: prevValue.email
};
} else if (name === "email") {
return {
fName: prevValue.fName,
lName: prevValue.lName,
email: value
};
}
});
}
return (
<div className="container">
<h1>
Hello {contact.fName} {contact.lName}
</h1>
<p>{contact.email}</p>
<form>
<input name="fName" placeholder="First Name" onChange={handleChange} />
<input name="lName" placeholder="Last Name" onChange={handleChange} />
<input name="email" placeholder="Email" onChange={handleChange} />
<button>Submit</button>
</form>
</div>
);
}
export default App;
Spread syntax
加三个点,即可完成填补的功能
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// expected output: 6
console.log(sum.apply(null, numbers));
// expected output: 6
Spread syntax (...) - JavaScript | MDN
Pushing those objects into an array, you need to use '[ ]'
JavaScript set object key by variable
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("root"));
//CHALLENGE: Make this app work by applying what you've learnt.
//1. When new text is written into the input, its state should be saved.
//2. When the add button is pressed, the current data in the input should be
//added to an array.
//3. The <ul> should display all the array items as <li>s
App.jsx
import React, { useState } from "react";
function App() {
const [inputText, setInputText] = useState("");
const [items, setItems] = useState([]);
function handleChange(event) {
const newValue = event.target.value;
setInputText(newValue);
}
function addItem() {
setItems((prevValue) => {
return [...prevValue, inputText];
});
setInputText("");
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<input type="text" onChange={handleChange} value={inputText} />
<button onClick={addItem}>
<span>Add</span>
</button>
</div>
<div id="root">
<ul>
{items.map((todoItem) => {
return <li>{todoItem}</li>;
})}
</ul>
</div>
</div>
);
}
export default App;
实现加入todolist和删除todolist的功能
App.jsx
import React, { useState } from "react";
import ToDoItem from "./ToDoItem";
function App() {
const [inputText, setInputText] = useState("");
const [items, setItems] = useState([]);
function handleChange(event) {
const newValue = event.target.value;
setInputText(newValue);
}
function addItem() {
setItems((prevItems) => {
return [...prevItems, inputText];
});
setInputText("");
}
function deletItem(id) {
setItems((prevItem) => {
return prevItem.filter((item, index) => {
return index !== id;
});
});
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<input onChange={handleChange} type="text" value={inputText} />
<button onClick={addItem}>
<span>Add</span>
</button>
</div>
<div>
<ul>
{items.map((todoItem, index) => (
<ToDoItem
key={index}
id={index}
text={todoItem}
onChecked={deletItem}
/>
))}
</ul>
</div>
</div>
);
}
export default App;
Todoltem.jsx
import React, { useState } from "react";
function ToDoItem(props) {
return (
<div
onClick={() => {
props.onChecked(props.id);
}}
>
<li>{props.text}</li>
</div>
);
}
export default ToDoItem;
Keeper App project
completed code
App.jsx
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([]);
function addNote(newNote) {
setNotes((prevValue) => {
return [...prevValue, newNote];
});
}
function deleteNote(id) {
setNotes((prevValue) => {
return prevValue.filter((items, index) => {
return index !== id;
});
});
}
return (
<div>
<Header />
{/* pass the new note back to the App */}
<CreateArea onAdd={addNote} />
{notes.map((noteItem, index) => {
return (
<Note
key={index}
id={index}
title={noteItem.title}
content={noteItem.content}
onDelete={deleteNote}
/>
);
})}
<Note
key={1}
title="Note title"
content="Note content"
onDelete={deleteNote}
/>
<Footer />
</div>
);
}
export default App;
Note.jsx
import React from "react";
function Note(props) {
function handleClick() {
props.onDelete(props.id);
}
return (
<div className="note">
<h1>{props.title}</h1>
<p>{props.content}</p>
<button onClick={handleClick}>DELETE</button>
</div>
);
}
export default Note;
CreateArea.jsx
import React, { useState } from "react";
function CreateArea(props) {
// create a constant
const [note, setNote] = useState({
title: "",
content: ""
});
function handleChange(event) {
// keeps track of the title and content
const { name, value } = event.target;
setNote((prevValue) => {
return {
// get previous value and update new value
...prevValue,
[name]: value
};
});
}
function submitNote(event) {
//pass the note back to the App
props.onAdd(note);
setNote({
title: "",
content: ""
});
// When you click submit button,it will refresh
event.preventDefault();
}
return (
<div>
<form>
<input
name="title"
placeholder="Title"
value={note.title}
onChange={handleChange}
/>
<textarea
name="content"
placeholder="Take a note..."
rows="3"
value={note.content}
onChange={handleChange}
/>
<button onClick={submitNote}>Add</button>
</form>
</div>
);
}
export default CreateArea;
Target:
//CHALLENGE:
//1. Implement the add note functionality.
//- Create a constant that keeps track of the title and content.
//- Pass the new note back to the App.
//- Add new note to an array.
//- Take array and render seperate Note components for each item.
Create a constant that keeps track of the title and content.
const [note, setNote] = useState({
title: "",
content: ""
});
function handleChange(event) {
const { name, value } = event.target;
setNote((prevValue) => {
return {
...prevValue,
[name]: value
};
});
}
Pass the new note back to the App.
1.需要在button设置click
<button onClick={submitNote}>Add</button>
2.需要触发函数,这个函数可以帮助传送数据到app.jsx中,props可以帮助传送数据
function submitNote(event) {
props.onAdd(note);
event.preventDefault();
}
3.在app中加入传送数据的函数,并加上接收的函数
function addItem(note) {
console.log(note);
}
return (
<div>
<Header />
<CreateArea onAdd={addItem} />
<Note key={1} title="Note title" content="Note content" />
<Footer />
</div>
);
Add new note to an array
const [newNote, setNewNote] = useState([]);
function addItem(note) {
setNewNote((prevValue) => {
return [...prevValue, note];
});
}
使用数组存放数据,并且使用接受数据的那个值,使用spread operator去存放数据到数组中
T ake array and render seperate Note components for each item.
,可以从map中获取index值
{newNote?.map((noteItem, index) => {
return (
<Note
key={index}
id={index}
title={noteItem.title}
content={noteItem.content}
onDelete={deleteItem}
/>
);
})}
//2. Implement the delete note functionality.
//- Callback from the Note component to trigger a delete function.
//- Use the filter function to filter out the item that needs deletion.
//- Pass a id over to the Note component, pass it back to the App when deleting.
//This is the end result you're aiming for:
//https://pogqj.csb.app/
//2. Implement the delete note functionality.
//- Callback from the Note component to trigger a delete function.
function Note(props) {
function deleteNote() {
props.ondelete();
}
return (
<div className="note">
<h1>{props.title}</h1>
<p>{props.content}</p>
<button onClick={deleteNote}>DELETE</button>
</div>
);
//- Use the filter function to filter out the item that needs deletion.
filter需要return 值,不然会报错
function deleteItem(id) {
setNewNote((prevValue) => {
return prevValue.filter((items, index) => {
return index !== id;
});
});
}
//- Pass a id over to the Note component, pass it back to the App when deleting.
map 函数有自带index 属性,可以直接给他i
function handleClick() {
props.onDelete(props.id);
}