react更新页面数据，操作页面，双向数据绑定

// 路由不是组件的直接跳转use client，useEffect，useRouter，需3个结合， use client表示客户端
'use client';
import { Button,Card, Space,Tag,Table,message,Input } from 'antd';
import { useEffect,useState } from 'react';
import http from '@/app/comm/http.js';
import "../dade.css";export default function Index() {const [messageApi,contextHolder] = message.useMessage();// 使用 useState 管理数据状态let [data, setData] = useState([]);// 加载镜像let select = () => {http.post('/index/select', {}).then((res) => {if(res.data.code == 2000){messageApi.open({type:'success',content: '加载成功', })setData(res.data.data);}// 处理响应数据}).catch(err => {console.error('请求出错:', err);messageApi.open({type: 'error',content: '加载失败', })});}const columns = [{title: '序号',dataIndex: 'index', width: 70,render: (_, __, index) => index + 1,},{title: '备注',dataIndex: 'name',width: 200,render: (_, record,index) => (<Space.Compact style={{ width: '100%' }}><Input value={record.name} size="small" placeholder='备注' onChange={(e) => handleInputChange(e,index,"name")}/><Button type="primary" size="small">更改</Button></Space.Compact>)},{title: '容器名称',dataIndex: 'names',},{title: '启动状态',dataIndex: 'status',width: 100,render: (_, record) => {// 检查状态字符串是否包含 "Up" 来判断容器是否运行中const isRunning = record.status.includes('Up');// 根据状态设置标签颜色和显示文本const color = isRunning ? 'green' : 'red';const text = isRunning ? '已启动' : '未启动';return <Tag color={color}>{text}</Tag>;}},{title: '镜像',dataIndex: 'image',width: 100,},{title: '端口映射（主机->容器）',dataIndex: 'ports',},{title: '挂载卷',dataIndex: 'address',},{title: '操作',dataIndex: 'address',width: 100,render: (_, record,index) => (<Space size="middle"><span style={{color:"#4096ff"}} onClick={() => update(record)}>编辑</span><span style={{color:'red'}} onClick={() => update(record)}>删除</span></Space>),},];// 容器列表数据const [data1, setData1] = useState([])// 数据双向绑定let handleInputChange = (ev,index,name) => {console.log(ev.target.value)data1[index][name] = ev.target.value;setData1([...data1])};// 加载容器列表let selectDocker = () => {http.post('/index/selectDocker', {}).then((res) => {if(res.data.code == 2000){let dade = res.data.data;dade.map((item,index) => {item.key = index; })setData1(dade)}// 处理响应数据}).catch(err => {console.error('请求出错:', err);messageApi.open({type: 'error',content: '加载失败', })});}// 刷新let refresh = () => {select();selectDocker()}let post = 1;useEffect(() => {if (post == 1) {post = 0;select();selectDocker()}}, []);// 编辑let update = (record) => {console.log(record)}// 选择行const [selectedRowKeys, setSelectedRowKeys] = useState([]);const onSelectChange = newSelectedRowKeys => {console.log('selectedRowKeys changed: ', newSelectedRowKeys);setSelectedRowKeys(newSelectedRowKeys);};const rowSelection = {selectedRowKeys,onChange: onSelectChange,};// 批量更新const listClick = () => {console.log(selectedRowKeys)};return (<div>{contextHolder}<div><Button type="primary" onClick={refresh}>刷新</Button><Button type="primary" style={{marginLeft:"10px"}}>新增容器</Button><Button type="primary" style={{marginLeft:"10px"}} onClick={listClick}>批量更新</Button></div><div style={{marginTop:"10px",display:"flex"}}><Space direction="vertical" size={16}><Card title="容器镜像版本"><div style={{height:"75vh",overflow:"auto"}}>{data.map((item, index) => (<div key={index} >{index == 0 ? <Tag color="green">镜像{item.repository}:{item.tag}，大小：{item.size}</Tag> : <Tag style={{marginTop:"10px"}} color="green">镜像{item.repository}:{item.tag}，大小：{item.size}</Tag>}</div>))}</div></Card></Space>{/* 容器列表 */}<div style={{marginLeft:"10px",width:"100%",height:"86vh",overflow:"auto"}}><Table size='small' rowSelection={rowSelection} columns={columns} dataSource={data1}  pagination={false} scroll={{ y: "80vh"}} bordered/></div></div></div>);
}