#root, .desc {
font-size: 16px;
padding: 20px;
}
#root p,
#root div {
padding: 6px 0;
}
#root input {
margin: 0 6px;
}
const { useEffect, useState, useRef } = React;
function App() {
const keyRef = useRef("uid");
const [list, setList] = useState([{ id: 0 }]);
const getItemKey = (item, index) => {
switch (keyRef.current) {
case "uid": {
return item.id;
}
case "subIndex": {
return index;
}
case "randomId": {
return Math.random();
}
default: {
return item.id;
}
}
};
const handleOnChangeKeyType = (event) => {
keyRef.current = event.target.value;
setList([{ id: 0 }]);
};
const handleAddClick = (type) => {
setList((list) => {
const item = { id: Date.now().toString(36) };
if (type === "prev") {
return [item].concat(list);
}
return list.concat(item);
});
};
const handleDelClick = (id) => {
setList((list) => list.filter((item) => item.id !== id));
};
return (
<div className="App">
<p>
<span>请选择key的类型:</span>
<select onChange={handleOnChangeKeyType}>
<option value="uid">唯一id</option>
<option value="subIndex">数组的下标</option>
<option value="randomId">随机数</option>
</select>
</p>
<p>
<button onClick={() => handleAddClick("prev")}>最前新增</button> |{" "}
<button onClick={() => handleAddClick("next")}>后面新增</button>
</p>
<div>
{list.map((item, index) => {
const key = getItemKey(item, index);
return (
<div className="item" key={key}>
<span>key: {key}</span>
<input />
<a href="javascript:;" onClick={() => handleDelClick(item.id)}>delete</a>
</div>
);
})}
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);