React19 中的交互操作

需要安装的库 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%" }}>
      {/* 事件处理和冒泡示例 */}
      <Space
        style={{ "--gap": "50px", width: "100%", height: "100%" }}
        className="adm-space"
        onClick={() => alert("冒泡了")}
      >
        <LearnInteraction
          onClick={(e) => {
            // 阻止事件冒泡到父元素
            e.stopPropagation()
            alert("点击了")
          }}
        ></LearnInteraction>
        <Button
          color="primary"
          fill="solid"
          onClick={() => setCount(count + 1)}
        >
          {count}
        </Button>
      </Space>
      <Space
        style={{
          "--gap": "50px",
          width: "100%",
          height: "100%",
        }}
      >
        <div>
          <div>
            {/* 对于深层嵌套对象，使用展开运算符的方式更新状态，代码会变得冗长且难以维护 */}
            {obj1.age.name.value}
            <Input
              style={{ 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}
            <Input
              style={{ 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>
      <form
        onSubmit={(e) => {
          // 阻止默认行为
          e.preventDefault()
          alert("提交表单！")
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <input />
        <button onClick={(e) => e.stopPropagation()}>发送</button>
      </form>
    </div>
  )
}

export default learnInteraction