我正在尝试用React js在电话簿应用程序上制作一个删除按钮

Question

我是这个网站的新手，同时也对j做出了反应。我有创建电话簿应用程序的代码。"`````函数应用程序(({const[entries，setEntries]=useState(entries_data(；

useEffect(() => {
console.log("application:", JSON.stringify(entries, null, 2));
return () => console.log("App is re-rendering!");
});
const addEntry = entry => {
setEntries(entries => [...entries, entry]);
};
return (
<section>
<h1>Phone Book</h1>
<PhoneBookForm addEntry={addEntry} />
<InformationTable entries={entries} />
</section>
);
}
const initiateEntry = {
Name: "",
phone: ""
};

'The application should contain two fields for entering name and phone number, an add button, a field where the entered data will be displayed.'

function PhoneBookForm({ addEntry }) {
const [entry, setEntry] = useState(initiateEntry);

useEffect(() => console.log("Form is rendering"));

const handleSubmit = e => {
e.preventDefault();
addEntry(entry);
};

const handleChange = e => {
const name = e.target.name;
const value = e.target.value;

setEntry(entry => ({ ...entry, [name]: value }));

console.log({ name, value });
};

return (
<form onSubmit={handleSubmit} style={style.form.container}>
<label>Name:</label>
<br />
<input
style={style.form.inputs}
name="Name"
type="text"
value={entry.Name}
onChange={handleChange}
/>
<br />

<label>Phone:</label>
<br />
<input
style={style.form.inputs}
className="userPhone"
name="phone"
type="text"
value={entry.phone}
onChange={handleChange}
/>
<br />
<input style={style.form.submitBtn} type="submit" value="Add Contact" />
</form>
);
}

"现在我无法添加删除按钮来删除添加的联系人。有人能帮我吗？这个功能应该是什么样子？">

{entries.map((entry, index) => (
<PhoneBookEntry entry={entry} key={entry.Name} deleteEntry={() => deleteEntry(index)} />
))}

Answer 1

您应该按照以下方式进行：

1. 首先，向deleteEntry发送一个联系人index函数，该函数接受PhoneBookEntry数组中联系人的entries编号的参数

function PhoneBookEntry({ entry, deleteEntry }) {
return (
<tr>
<td>{entry.Name}</td>
<td>{entry.phone}</td>
<td><button onClick={deleteEntry}>delete entry</button></td>
</tr>
);
}

2. 为deleteEntry中的每个联系人添加一个删除按钮组件

const deleteEntry = index => {
setEntries(entries => entries.splice(index, 1)); // remove the index item from array
};

3. 在deleteEntry组件中添加App函数本身

return (
<section>
<h1>Phone Book</h1>
<PhoneBookForm addEntry={addEntry} />
<InformationTable entries={entries} deleteEntry={deleteEntry} />
</section>
);
}

4. 然后当然将InformationTable函数发送到PhoneBookEntry0

function InformationTable({ entries, deleteEntry }) {

5. 最后，提取CCD_12中的InformationTable函数

PD_10