当前位置：首页 > news >正文

React19 中的交互操作

news 2025/9/12 5:03:04

需要安装的库 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