From 1cbf245a2f50c03532d191617d7df54050eb20f9 Mon Sep 17 00:00:00 2001
From: shikong <919411476@qq.com>
Date: Fri, 25 Oct 2024 19:59:53 +0800
Subject: [PATCH] =?UTF-8?q?6.=20=E8=A1=A8=E5=8D=95=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                       |  3 ++
 src/components/InputComponent.js | 48 ++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/components/InputComponent.js

diff --git a/src/App.js b/src/App.js
index 7a56145..50a9bc6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React from "react";
 // import logo from './logo.svg';
 import './App.css';
 
+import InputComponent from "./components/InputComponent";
 function App() {
     // vue3 组合式 API
     // React 必须大写 Pascal 命名 组件
@@ -195,6 +196,8 @@ function App() {
                 </div>
 
                 <IfComponent/>
+
+                <InputComponent/>
             </header>
         </div>
     );
diff --git a/src/components/InputComponent.js b/src/components/InputComponent.js
new file mode 100644
index 0000000..73d11d4
--- /dev/null
+++ b/src/components/InputComponent.js
@@ -0,0 +1,48 @@
+import {useEffect, useState} from "react";
+
+export default function InputComponent() {
+    const [state, setState] = useState({
+        inputValue: "666",
+        checkedArr: []
+    })
+
+    function onChecked(e) {
+        let tmp = [...state.checkedArr]
+        if (e.target.checked) {
+            tmp.push(e.target.value)
+        } else {
+            let index = tmp.indexOf(e.target.value)
+            tmp.splice(index, 1)
+            // checkedArr: [...state.checkedArr].slice(0, index).concat([...state.checkedArr].slice(index + 1))
+        }
+
+        setState({
+            ...state,
+            checkedArr: tmp
+        })
+    }
+
+    useEffect(() => {
+        console.log(state.checkedArr)
+    }, [state.checkedArr]);
+
+    return <div style={{border: "1px solid", width: "80%"}}>
+        <div>
+            {state.inputValue}
+        </div>
+
+        <input onInput={(e) => {
+            setState({
+                ...state,
+                inputValue: e.target.value
+            })
+        }}
+               value={state.inputValue}/>
+
+        <div>
+            <input value={1} onChange={onChecked} type="checkbox" name="options"/> 选项1
+            <input value={2} onChange={onChecked} type="checkbox" name="options"/> 选项2
+            <input value={3} onChange={onChecked} type="checkbox" name="options"/> 选项3
+        </div>
+    </div>
+}