主要説起來，應該算是自己基礎不牢。
一個小功能，卻思考大半天。
主要應用場景是做時間選擇的時候，有可能時間段是分開的，不連貫，這樣原本初始提供的一個兩個的時間選擇就不怎麽夠用。所以可以根據用戶自己的需要動態生成。
剛開始想的比較簡單，定義兩個變量，一個增加一個減少，但是具體實現的時候產生衝突，導致問題是變量之間衝突，元素添加之後再次添加不上去。
找了很多辦法。最終解決辦法如下：（代碼結合後面的示例圖會更直觀）
1.設定需要用到的值：
const [inde,setInde] =useState(1)
const [selArr,setSelArr] = useState([])
2.增加方法/刪除方法：
const adds =()=>{
selArr.push(setInde(String(inde+1)))
setSelArr(selArr)
}
const reduce =(index)=>{
selArr.splice(index,1);
setSelArr([...selArr])
}
3.根據數組循環生成：
{
selArr.map((item,index)=>{
return (
<li className="list" key={index}>{item}
<div className={style.restcenter} key ={inde}>
<span>休息時間：</span>
<select
name="value"
style={{
fontSize: "18px",
width: "120px",
height: "35px",
textAlign: "center",
}}
onChange={(value)=>setRestPreTime(value.target?.value)}
>
{
alltime.map((item,index)=>{
return(
<option key={index} value={index}>{item}</option>
)
})
}
</select>
<span className={style.symbols}>~</span>
<select
name="value"
style={{
fontSize: "18px",
width: "120px",
height: "35px",
textAlign: "center",
}}
onChange={(value)=>setRestAftTime(value.target?.value)}
>
{
alltime.map((item,index)=>{
return(
<option key={index} value={index}>{item}</option>
)
})
}
</select>
<span style={{marginLeft:"20px"}}
onClick={()=>reduce(index)}
className="delete"
><MinusCircleOutlined /></span>
</div>
</li>)
})
}
</ul>
<PlusCircleOutlined onClick={adds}/>
如下最終效果圖：
剛開始爲空，
使用者有需求點擊新增，如果不需要可以點擊減號進行刪除：
———————————————— CSDN博主「夢行者」的原创文章
