我正在嘗試使用 React js 在電話簿應用程序上創建一個刪除按鈕

Question

'我是這個網站的新手，同時對 j 做出反應。 我有創建電話簿應用程序的代碼。 ````` function App() { 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>
      );
    }

'現在我無法添加刪除按鈕來刪除已添加的聯系人。 誰能幫幫我，那個 function 應該是什么樣子的？

function InformationTable({ entries }) {
  return (
    <>
      <table style={style.table} className="informationTable">
        <thead>
          <tr>
            <th style={style.tableCell}>Name</th>
            <th style={style.tableCell}>Phone</th>
          </tr>
        </thead>
        <tbody>
          {!entries.length && <p>No data :( </p>}
          {entries.map(entry => (
            <PhoneBookEntry entry={entry} key={entry.Name} />
          ))}
        </tbody>
      </table>
      <br />
      <input style={style.form.deleteBtn} type="submit" value="Delete" />
    </>
  );
}

function PhoneBookEntry({ entry }) {
  return (
    <tr>
      <td>{entry.Name}</td>
      <td>{entry.phone}</td>
    </tr>
  );
}

export default App;

Answer 1

您應該按照以下方式進行操作：

1. 首先，發送到PhoneBookEntry一個聯系人deleteEntry function，它在您的entries數組中采用聯系人index號的參數

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

2. 在PhoneBookEntry組件中為每個聯系人添加一個刪除按鈕

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

3. 在App組件中添加deleteEntry function 本身

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

4. 然后當然是將deleteEntry function發送到InformationTable

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

5. 最后，提取InformationTable中的deleteEntry function

    function InformationTable({ entries, deleteEntry }) {