react antd table中的Input每次输入都失去焦点 另一种导致问题的原因

1,362 阅读1分钟

这是别人写的另外两片文章中的导致问题的原因
解决antd+react的Input组件每次输入都失去焦点 CSDN
antd table input 失焦的问题

出问题的状态: 请添加图片描述 正常情况: 请添加图片描述

我遇到问题的原因

<Table className='rewrite-edit-table' 
       columns={this.columns} 
       dataSource={this.statedataSource}
       pagination={false}/>
columns = [
        {
            title: '添加/修改的key',
            dataIndex: 'key',
            key: 'key',
            render: (data,list,index) => {
                return <Input value={data}
                              onChange={(e) => {
                                  list.key=e.target.value
                                  this.setState({})
                              }}
                />
            }
        },
        {
            title: 'value',
            dataIndex: 'value',
            key: 'value',
            render: (data,list,index) => {
                return <Input value={data}
                              onChange={(e) => {
                                  list.value=e.target.value
                                  this.setState({})
                              }}
                />
            }
        }]

可以看到,Table中columns的数据中有一个的key被命名为了"key",也就是说dataSource中有一个参数名也是"key",导致这个参数下的Input出了失去焦点问题。 我猜想这个问题的原因是每次render时react做diff时误以为这个"key"参数和diff算法有关系,导致每次都会重新渲染这个Input,产生了失去焦点的问题,只要把key修改为key123或者其他就可解决问题。

还是要注意命名规范啊