如何在删除项目后自动关注列表项目

Question

我在Stacklitz上有这个反应代码，其中autoFocus在向列表中添加新项目时有效，但在删除项目时无效。

我需要找到一个解决方案，当从列表中删除任何项目时，最后一个项目都保留在autoFocus中。

Answer 1

您可以使用refs数组来管理您的输入：

import React, { Component, useState, useCallback } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<Hello name={this.state.name} />
<InputList />
</div>
);
}
}
function InputList() {
const refs = React.useRef([]);
const [items, setItems] = useState([]);
const add = useCallback(() => setItems([...items, {id: '1'}]), [items]);
const ondelete = useCallback(() => {
const index = items.length -1;
if (index - 1 >= 0) {
refs.current[index - 1].focus();
} 
setItems(items.splice(1));
});

return (
<div>
{items.map((item,i) => <input ref={e => refs.current[i] = e} key={item.i} autoFocus={i === items.length - 1 ? true : false}/>)}
<button onClick={add} type="button">Add</button>
<button onClick={ondelete} type="button">Delete</button>
</div>
);
}
render(<App />, document.getElementById('root'));

我添加了refs数组，并修改了onDelete方法以集中正确的输入。