SOURCE

console 命令行工具 X clear

                    
>
console
const { useState, useEffect } = React;

function RowList(props) {
    const { dataList ,columnList,loadMore,onSelect,selectedArr,setSelectedArr} = props

    const oncheckbox=(item)=>{
       const ischeck = selectedArr.includes(item)
       let array
       if(ischeck){
           array = selectedArr.filter(i=>i.id !=item.id)
       }else{
           array=[...selectedArr,item]
       }
       setSelectedArr(array)
       console.log("array==",array)
    }
    // 你的代码
    return <div>
        <div>
        <table border="2px">
            <tr>
            <td></td>
                {
                    columnList.map(item=>{
                        return(
                            <td key={item.id}>{item.label}</td>
                        )
                    })
                }
            </tr>

            {
                dataList.map(item=>{
                    return(
                        <tr  key={item.id}>    
                            <td><input type="checkbox" value={item.id} onClick={(e)=>oncheckbox(item)} checked={selectedArr.includes(item)}></input></td>
                            <td>{item.id}</td>
                            <td>{item.name}</td>
                            <td>{item.phone}</td>
                        </tr>
                    )
                })
            } 
            </table>
        </div>
        <div onClick={()=>loadMore()}>加载更多</div>
    </div>
}


function App() {
    const [dataList, setDataList] = useState([])
    const [selectedArr, setSelectedArr] = useState([])
    const [columnList, setColumnList] = useState([
        {
            index: 'id',
            label: 'ID'
        },
        {
            index: 'name',
            label: '名称'
        },
        {
            index: 'phone',
            label: '手机号'
        },])
    useEffect(() => {
        loadData()
    }, [])

    function onSelect(e) {
        console.log("e===",e)
        setSelectedArr(e)
    }
    function loadMore(currentLen) {
        loadData(currentLen)
    }
    async function loadData(currentLen = 0) {
        const res = await mockData(currentLen)
        setDataList([...dataList, ...res])
    }
    // mock数据,不要修改此函数
    function mockData(currentIndex = 0, LEN = 100) {
        return new Promise((resolve, reject) => {
            try {
                const res = []
                for (let i = currentIndex; i < currentIndex + LEN; i++) {
                    res.push({
                        id: `id-${i}`,
                        name: `名称-${i}`,
                        phone: 13333333333 + i
                    })
                }
                resolve(res)
            } catch (e) {
                reject(e)
            }
        })
    }
    return (
        <div>
            <RowList dataList={dataList} columnList={columnList} onSelect={(e) => onSelect(e)} loadMore={(e) => loadMore(e)} selectedArr={selectedArr} setSelectedArr={setSelectedArr}></RowList>
            {selectedArr.map(e => <span style={{ marginRight: '4px' }}>{e.id}</span>)}
        </div>)

}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);
<div id="app"></div>
.select{
    width:20px;
    height: 20px;
    border: 1px solid red
}

.bgc{
    background-color: red;
}

本项目引用的自定义外部资源