我正在尝试使用 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 }) {