react使用ant design组件开发遇到的问题及解决

Input

情景：在Input中展示原有值，并且修改后获取到修改后的值。

问题：value 和一个defaultValue。使用defaultValue的时候展示默认的值是可以的，但是如果你修改了那个值页面数据是不会更新的，即你获取到的值为原有值。如果你去使用value接收原有值的时候又会发现他的输入框你输入不了任何值。

解决：在Input自带的onChange方法中获取修改后的值。在onChange中使用event.target.value捕获输入框变化的值，然后赋值给一个全局变量，最后在onPressEnter中调用该变量，即可获取新值。

const [editName, setEditName] = useState('张三')

const handleOk = () => {
    console.log(editName)
}

const change = (e) => {
    setEditName(e.target.value)
}
<Input onPressEnter={handleOk} defaultValue={editName} onChange={e=>change(e)} />
             

Table

情景：对数据进行批量选择操作。

问题：无法批量选中，最终发现每条数据必须要有key值，而后端传输的数据通常没有key字段。

解决：在Table上加上rowKey字段赋值，可以rowKey=“id”

// 批量选择，返回id的数组
const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
        let params: number[] = [];
        selectedRows.map((row: { id: any; })=>{
            params.push(row.id)
        })
        console.log(params)
    }
};

<Table columns={columns} rowSelection={{ ...rowSelection }} dataSource={data} rowKey="id"}/>