开发过程中，有个需求是点击“添加”按钮后，如果列表中已有快速添加的商品，那么就定位到该商品那一行并且该行的申购数量输入框自动获取焦点。
table.png
设置列表input的ref
render: (text, row, index) => {
return {
children: (
<Input
ref={input => {
this['Item' + index] = input;
}}
style={{ color: 'orange' }}
/>
),
props: {},
};
},
设置table的ref
<Table
id="table"
ref={ref => (this.table = ref)}//ref
style={{ marginTop: '20px' }}
rowKey={records => records.keyId}
rowSelection={rowSelection}
columns={columns}
dataSource={dataSource}
scroll={{ x: 1400, y: this.state.y }}
/>
定位代码：
import { findDOMNode } from 'react-dom';//导入findDOMNode
//调用getRowHeightAndSetTop方法获取高亮行的index值后，通过setScrollTopValue设置滚动条位置
//data：table的datasource数据
//value：当前需要高亮的值
getRowHeightAndSetTop(data,value) {
data&&data.forEach((item, index) => {
if (item.keyId == value.keyId) {
this.setTableScrollTop(index);
}
});
}
//设置滚动条位置的方法
setTableScrollTop(index) {
if (index != 0 || index != -1) {
const table = findDOMNode(this.table);
const tableBody = table.querySelector('.ant-table-body');
//57是一行的高度，index*57就是滚动条要移动的位置
tableBody.scrollTop = 0;
let currPosition = index * 57;
tableBody.scrollTop = currPosition;
const domInputRef = 'Item' + index;//获取该行input实例
this[domInputRef].focus();
const divRef = 'ItemCode' + index;//获取要变色的组件实例
this[divRef].style.color = 'red';
}
}
如果table可选那么根据selectedRowKeys是否包含当前行keyId来设置文字颜色
{
title: intl.get('productName'),
width: 220,
render: (text, row, index) => {
return {
children: (
<div
ref={div => {
this['ItemCode' + index] = div;
}}
style={{
color:
pageContext.state.selectedRowKeys.indexOf(data[index].keyId) !=
-1
? 'red'
: 'gray',
}}
>
{data[index].produceName}
</div>
),
props: {},
};
},
},
如果table不可选，那么在state中创建一个对象，当定位到该行时，将该行信息赋值给创建的对象（例如selectRow）,根据keyId来设置文字颜色
{
title: intl.get('productName'),
width: 80,
render: (text, row, index) => {
return {
children: (
<div
ref={div => {
this['ItemCode' + index] = div;
}}
style={{
color:
pageContext.state.selectRow == undefined
? 'gray'
: pageContext.state.selectRow.keyId == data[index].keyId
? 'red'
: 'gray',
}}
>
{data[index].produceName}
</div>
),
props: {},
};
},
},
参考文章
https://blog.csdn.net/jinglier520/article/details/84325972
https://www.jianshu.com/p/33a3e1a2f750
https://blog.csdn.net/Wcharles666/article/details/90297489
