需要安裝的庫?antd-mobile、use-immer
在App.jsx 中引入組件?Action
import "./App.css"
import Action from "./pages/action"
function App() {return (<><Action></Action></>)
}export default App
action.jsx 組件
import LearnInteraction from "../components/learnInteraction"
import { useState } from "react"
import { Button, Space, Input } from "antd-mobile"
// 使用 use-immer 庫來簡化復雜狀態的更新
import { useImmer } from "use-immer"const action = () => {const [count, setCount] = useState(0)// 對于復雜數據類型中的對象，不要直接修改原始對象，而是創建一個新的對象來替換const [obj1, setObj1] = useState({age: { name: { value: 18 } },})// 使用 use-immer 庫管理狀態 - 允許直接修改 draft 對象const [obj2, setObj2] = useImmer({age: { name: { value: 20 } },})return (<div style={{ width: "100%", height: "100%" }}>{/* 事件處理和冒泡示例 */}<Spacestyle={{ "--gap": "50px", width: "100%", height: "100%" }}className="adm-space"onClick={() => alert("冒泡了")}><LearnInteractiononClick={(e) => {// 阻止事件冒泡到父元素e.stopPropagation()alert("點擊了")}}></LearnInteraction><Buttoncolor="primary"fill="solid"onClick={() => setCount(count + 1)}>{count}</Button></Space><Spacestyle={{"--gap": "50px",width: "100%",height: "100%",}}><div><div>{/* 對于深層嵌套對象，使用展開運算符的方式更新狀態，代碼會變得冗長且難以維護 */}{obj1.age.name.value}<Inputstyle={{ border: "1px solid Gray" }}placeholder="請輸入年齡"value={obj1.age.name.value}onChange={(val) => {setObj1({...obj1,age: {...obj1.age,name: {...obj1.age.name,value: val,},},})}}/>{/* 使用 use-immer 庫更新復雜嵌套對象 - 可以直接修改 draft 對象，代碼更簡潔 */}{obj2.age.name.value}<Inputstyle={{ border: "1px solid Gray" }}placeholder="請輸入年齡"value={obj2.age.name.value}onChange={(val) => {setObj2((draft) => {draft.age.name.value = val})}}/></div></div></Space></div>)
}export default action
learnInteraction.jsx 組件
import { Button } from "antd-mobile"
const learnInteraction = ({ onClick }) => {return (<div><Button color="primary" fill="solid" onClick={onClick}>會冒泡</Button><formonSubmit={(e) => {// 阻止默認行為e.preventDefault()alert("提交表單！")}}onClick={(e) => e.stopPropagation()}><input /><button onClick={(e) => e.stopPropagation()}>發送</button></form></div>)
}export default learnInteraction
