react中数组列表的简单新增，删除以及修改实践

效果示例图

新增图片

编辑图片

示例代码 index.jsx

import { useEffect, useState } from "react";
import "./index.scss";

// 创建数据
function CreateForm(props) {
  //初始化form表单数据
  const defaultParams = {
    name: "",
    age: "",
    sex: "",
  };

  let [formParams, setFormParams] = useState(defaultParams);

  //编辑ID
  let [id, setId] = useState(null);

  let sexList = [
    {
      id: "",
      name: "请选择性别",
    },
    {
      id: 0,
      name: "女",
    },
    {
      id: 1,
      name: "男",
    },
  ];

  function getFormValue(params) {
    setFormParams({
      ...formParams,
      [params.key]: params.value,
    });
  }

  //点击-重置
  function resetHandle() {
    setFormParams(defaultParams);
    setId(null);
    props.click({
      type: "reset",
      row: defaultParams,
    });
  }

  //点击-提交
  function submitHandle() {
    if (Object.prototype.toString.call(formParams) === "[object Object]") {
      for (let i in formParams) {
        if (!(trimFun(formParams[i]) && trimFun(formParams[i]).length > 0)) {
          console.log("[不能为空]");
          return;
        }
      }
      //如果存在ID，说明是修改，否则是新增
      if (id) {
        formParams["id"] = id;
        props.click({
          type: "edit",
          row: formParams,
        });
      } else {
        const id = new Date().getTime();
        formParams["id"] = id;
        props.click({
          type: "submit",
          row: formParams,
        });
      }

      setFormParams(defaultParams);
      setId(null);
    }
  }

  function trimFun(value) {
    if (typeof value === "string") {
      return value.trim();
    } else {
      return value;
    }
  }

  useEffect(() => {
    console.log("[props]", props);
    if (props.editParams) {
      const id = props.editParams.id;
      const name = props.editParams.name;
      const age = props.editParams.age;
      const sex = props.editParams.sex;

      setId(id);

      setFormParams({
        name: name,
        age: age,
        sex: sex,
      });
    } else {
      setId(null);
    }
  }, [props]);

  return (
    <>
      <div className="createForm-wrap">
        <div className="createForm-item">
          <div className="createForm-label">姓名：</div>
          <div className="createForm-con">
            <input
              type="text"
              value={formParams.name}
              placeholder="请输入姓名"
              onChange={(e) =>
                getFormValue({ key: "name", value: e.target.value })
              }
            />
          </div>
        </div>

        <div className="createForm-item">
          <div className="createForm-label">年龄：</div>
          <div className="createForm-con">
            <input
              type="text"
              value={formParams.age}
              placeholder="请输入年龄"
              onChange={(e) =>
                getFormValue({ key: "age", value: e.target.value })
              }
            />
          </div>
        </div>

        <div className="createForm-item">
          <div className="createForm-label">性别：</div>
          <div className="createForm-con">
            <select
              placeholder="请选择性别"
              value={formParams.sex}
              onChange={(e) =>
                getFormValue({ key: "sex", value: e.target.value })
              }
            >
              {sexList.map((item, index) =>
                item.name == "请选择性别" ? (
                  <option value={item.id} key={index}>
                    {item.name}
                  </option>
                ) : (
                  <option value={item.id} key={index}>
                    {item.name}
                  </option>
                )
              )}
            </select>
          </div>
        </div>

        <div className="createForm-footer">
          <div className="cancel-btn" onClick={resetHandle}>
            重置
          </div>
          <div className="submit-btn" onClick={submitHandle}>
            提交
          </div>
        </div>
      </div>
    </>
  );
}

//列表数据
function Item(props) {
  const item = props.item;
  // 删除
  function deleteHandle(row) {
    props.click({
      type: "delete",
      row: row,
    });
  }
  //编辑
  function editHandle(row) {
    props.click({
      type: "edit",
      row: row,
    });
  }
  return (
    <li className="list-item">
      <div>{item.id}</div>
      <div>{item.name}</div>
      <div>{item.age}</div>
      <div>{item.sex == "1" ? "男" : "女"}</div>
      <div>
        <span className="delete" onClick={() => deleteHandle(item)}>
          删除
        </span>
        <span className="edit" onClick={() => editHandle(item)}>
          修改
        </span>
      </div>
    </li>
  );
}

function Marray() {
  let [dataList, setDataList] = useState([]);

  let [editObject, setEditObject] = useState(null);

  // 新增数据
  function plusHandle(params) {
    if (params.type == "submit") {
      dataList.push(params.row);
      setDataList([...dataList]);
    } else if (params.type == "edit") {
      for (let i = 0; i < dataList.length; i++) {
        if (dataList[i].id == params.row.id) {
          dataList[i] = params.row;
        }
      }
      setDataList(dataList);
    }
    setEditObject(null);
  }

  // 对数据的修改|删除
  function operateHandle(params) {
    if (params.type == "delete") {
      setDataList((current) =>
        current.filter((item) => item.id !== params.row.id)
      );
    } else {
      setEditObject(params.row);
    }
  }

  useEffect(() => {}, []);

  return (
    <>
      {editObject ? (
        <CreateForm editParams={editObject} click={plusHandle} />
      ) : (
        <CreateForm click={plusHandle} />
      )}

      <div style={{ height: "20px" }}></div>

      <ul className="list-wrap">
        <li className="list-header">
          <div>ID</div>
          <div>姓名</div>
          <div>年龄</div>
          <div>性别</div>
          <div>操作</div>
        </li>
        {dataList.map((item, index) => {
          return <Item key={index} item={item} click={operateHandle} />;
        })}
      </ul>
    </>
  );
}

export default Marray;

示例样式 index.scss

input,
input:focus {
  border-radius: 4px;
  outline: none;
  padding: 0px 12px;
}
input::placeholder,
input::-moz-placeholder,
input::-webkit-input-placeholder {
  color: #999;
}

select,
select:focus {
  border-radius: 4px;
  outline: none;
  padding: 0px 12px;
}
select::placeholder,
select::-moz-placeholder,
select::-webkit-input-placeholder {
  color: #999;
}
.addBtn {
  border: 1px solid #00a2ef;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  margin-left: 12px;
  cursor: pointer;
  user-select: none;
}

.list-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  .list-header {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    background-color: #dcdcdc;
    div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .list-item {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .delete {
      border: 1px solid #ff0000;
      border-radius: 8px;
      font-size: 12px;
      padding: 6px 12px;
      color: #ff0000;
      margin-right: 12px;
      cursor: pointer;
    }

    .edit {
      border: 1px solid #00a2ef;
      border-radius: 8px;
      font-size: 12px;
      padding: 6px 12px;
      background-color: #00a2ef;
      color: #ffffff;
      cursor: pointer;
    }
  }
  .list-item:nth-of-type(2n-1) {
    background-color: #dcdcdc;
  }
}

.createForm-wrap {
  border-radius: 8px;
  width: 600px;
  margin: 20px auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
  .createForm-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 12px;
    align-items: center;
    .createForm-label {
      width: 100px;
      font-size: 16px;
      color: #333;
    }
    .createForm-con {
      --width: 100px;
      width: calc(100% - var(--width));

      input {
        border: 1px solid #dcdcdc;
        width: 100%;
        height: 40px;
      }
      select {
        border: 1px solid #dcdcdc;
        width: 100%;
        height: 40px;
      }
    }
  }

  .createForm-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 12px 0px;
    .cancel-btn {
      border: 1px solid #dcdcdc;
      border-radius: 4px;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 16px;
      margin-right: 12px;
      cursor: pointer;
    }
    .submit-btn {
      border-radius: 4px;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 16px;
      background-color: #00a2ef;
      color: #fff;
      cursor: pointer;
    }
  }
}