它是一個程式，只需單擊“添加記錄”即可在每一行上獲取特定資料。我很難執行洗掉按鈕功能，單擊它時，該特定行將被洗掉。它應該在 DeleteHandler() 中實作。
import React, { useState } from 'react'
const DataFetch = () => {
const [posts, setPosts] = useState([]);
const ClickHandler = () => {
const url = `https://swapi.dev/api/people/${Math.floor(Math.random() * 10) 1}`
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
console.log(json);
setPosts([...posts,
json.name])
}
catch (error) {
console.log("error");
}
};
fetchData();
}
const DeleteHandler = (e) => {
const name = e.target.getAttribute("name")
console.log(name)
}
return (
<div>
<div>
<button onClick={ClickHandler}>ADD RECORD</button>
</div>
<table>
{posts.map((post) =>
<tr>
<td key={Math.random()}>{post}</td>
<td><button name={post} onClick={()=>DeleteHandler}>delete</button></td>
</tr>
)}
</table>
</div>
);
};
export default DataFetch
uj5u.com熱心網友回復：
使用此代碼
import React, { useState } from "react";
let uidArray = [];
const DataFetch = () => {
const [posts, setPosts] = useState([]);
const ClickHandler = () => {
const url = `https://swapi.dev/api/people/${
Math.floor(Math.random() * 10) 1
}`;
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
console.log(json);
setPosts([...posts, json.name]);
} catch (error) {
console.log("error");
}
};
fetchData();
};
const DeleteHandler = (e) => {
const ele = document.getElementsByClassName(e)[0];
ele.remove();
};
return (
<div>
<div>
<button onClick={ClickHandler}>ADD RECORD</button>
</div>
<table>
{posts.map((post) => (
<tr className={post}>
<td key={Math.random()}>{post}</td>
<td>
<button name={post} onClick={() => DeleteHandler(post)}>
delete
</button>
</td>
</tr>
))}
</table>
</div>
);
};
export default DataFetch;
https://codesandbox.io/s/smoosh-breeze-rx7s0b
uj5u.com熱心網友回復：
在您的 DeleteHandler() 函式中，您應該能夠呼叫 setPosts() 并將帖子設定為自身減去被單擊的行，然后您的 JSX 將知道重新呈現自己并且該行不再存在。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463900.html
標籤：javascript 反应 ecmascript-6 删除行
上一篇：如何開玩笑地模擬一個咖喱函式？