javascript - 无法设置数组中单个元素的属性

Question

在名为 admin 的数组中，我想在单击“更新”按钮时显示一个 div，当我这样做时，该 div 显示在数组的所有元素下方。我只想让它显示在所选元素下方。

function Admin(props) {
  const [showMe, setShowMe] = React.useState(false);

  const [updateName, setupdateName] = React.useState("");
  const [updateDesc, setupdateDesc] = React.useState("");

  return (
    <div>
      <div className="adminProducts">
        {props.admin.map((x, i) => (
          <div>
            {showMe ? (
              <div className="UpdateSection">
                <input
                  type="text"
                  placeholder="Product Name"
                  onChange={e => setupdateName(e.target.value)}
                  value={updateName}
                />
                <br />

                <textarea
                  placeholder="Product Description"
                  onChange={e => setupdateDesc(e.target.value)}
                  value={updateDesc}
                />

                <button
                  type="submit"
                  onClick={e => {
                    props.UpdateInfo({ updateName, updateDesc }, { x }, i);
                    setupdateName("");
                    setupdateDesc("");
                  }}
                >
                  Save
                </button>
              </div>
            ) : null}
            <div>{x.name}</div>
            <div>
              <button onClick={e => setShowMe(!showMe)}>
                {showMe ? "Close" : "Update"}
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

我想将数组中的各个元素的 showMe 设置为 true，以便类名 UpdateSection 的 div 仅显示该特定元素，而不显示任何其他元素。

Answer 1

您可以保存要显示的元素的 id:

  const [showMe, setShowMe] = React.useState([]);

  // ...

  const isShown = el => showMe.includes(el.id);

  const toggleShown = el => {
    setShowMe(shown => {
      if (shown.includes(el.id)) {
        return shown.filter(id => id !== el.id);
      }
      return [...shown, el.id];
    });
  };

  //...

  return (
    <div>
      <div className="adminProducts">
        {props.admin.map((x, i) => (
          <div>
            {isShown(x) ? (

            //...

            <div>
              <button onClick={e => toggleShown(x)}>
                {isShown(x) ? "Close" : "Update"}
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );