编辑数组中的元素时出现问题

Question

我正在开发反应电话簿应用程序。我无法理解编辑联系方式的正确逻辑。 单击

edit

按钮时，我需要显示表单并在输入字段中输入该特定联系人的姓名和号码，然后将用户输入作为编辑后的联系人并将其显示在列表中。 我面临以下问题：

如果

showForm

为 false，则会给出错误

Cannot set properties of null (setting 'value')

虽然我在

setShowForm(true)

函数中添加了

handleEdit

但它仍然显示错误，但在表单已经显示时有效。 这是代码：

import React, { useState } from "react";

const App = () => {
  let phoneBookData = [{ name: "John Doe", number: 12345678 }];
  const [contacts, setContacts] = useState(phoneBookData);
  const [showForm, setShowForm] = useState(false);
  const [userName, setUserName] = useState("");
  const [number, setNumber] = useState("");

  const handleDelete = (index) => {
    console.log("index:", index);
    let selectedIndex = index;
    let newContacts = contacts.filter(
      (_contact, index) => index !== selectedIndex
    );
    setContacts(newContacts);
  };

  const handleAddContact = () => {
    if (userName.length === 0) {
      alert("Please enter a valid name.");
      return;
    } else if (userName.includes("1")) {
      alert("Name cannot contain any number or special character.");
      return;
    } else if (number.length === 0) {
      alert("Please enter a valid number.");
      return;
    }

    let newContact = { name: userName, number: number };
    setContacts([...contacts, newContact]);
    setUserName("");
    setNumber("");
  };

  const handleEdit = (index) => {
    setShowForm(true);
    document.getElementById("number").value = number;
    document.getElementById("name").focus();
    document.getElementById("name").value = userName;
  };

  return (
    <div id="main">
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-4"></div>

          <div className="col-md-4">
            <div className="App">
              <h2 className="header">PhoneBook App</h2>
              <span
                style={{
                  cursor: "pointer",
                  color: "blue",
                  textDecoration: "underline",
                }}
                onClick={() => setShowForm(!showForm)}
              >
                {showForm ? "Hide Contact Form" : "Create New Contact"}
              </span>
              {showForm && (
                <div className="container">
                  <form className="form">
                    <div className="form-group">
                      <input
                        type="text"
                        className="form-control"
                        placeholder="Name"
                        value={userName}
                        onChange={(e) => setUserName(e.target.value)}
                        id="name"
                      />
                    </div>
                    <div className="form-group">
                      <input
                        type="text"
                        className="form-control"
                        placeholder="Number"
                        value={number}
                        onChange={(e) => setNumber(e.target.value)}
                        id="number"
                      />
                    </div>
                    <button
                      type="button"
                      className="btn btn-primary icon-holder"
                      onClick={handleAddContact}
                    >
                      Add
                    </button>
                  </form>
                </div>
              )}
              <p>There are {contacts.length} contacts saved in this book.</p>
              {contacts.map((contact, index) => (
                <div key={index} className="contacts">
                  <div className="contact-details">
                    <h5>
                      {index + 1}) {contact.name}
                    </h5>
                    <p>{contact.number}</p>
                  </div>
                  <button
                    className="icon-holder"
                    onClick={() => handleEdit(index)}
                  >
                    Edit
                  </button>
                  <button
                    className="icon-holder"
                    onClick={() => {
                      handleDelete(index);
                    }}
                  >
                    Delete
                  </button>
                  <hr />
                </div>
              ))}
            </div>
          </div>

          <div className="col-md-4"></div>
        </div>
      </div>
    </div>
  );
};

export default App;

这里是codesandbox的链接：https://codesandbox.io/p/sandbox/todos-app-listed-rxsd3p?file=%2Fsrc%2FApp.js%3A6%2C51

Answer 1

不要使用像

document.getElementById

这样的 DOM 选择器。

在您的情况下，选择器返回

null

，因为当您尝试选择它们时，相应的元素尚未出现在页面上。

解决方案：去掉三个

document.getElementById

调用，并将

autoFocus

属性添加到您想要聚焦的字段。

如果您需要对实际 DOM 元素的引用，请阅读

useRef

。