如何使用 React 16.8 钩子适当地获取项目索引?

Question

我正在使用 React 16 Hooks 练习一个待办事项列表项目。但是，我发现很难像这样使用 map(( 函数获取索引：

父待办事项组件：

const Todo = () => {
const dispatch = useDispatch();
const { list } = useSelector(state => state.todoReducer.toJS());
const [value, setValue] = useState('');
function handleOnchange (e) {
setValue(e.target.value)
}
function handleAddItem() {
actionCreators.addItem(dispatch, value);
setValue('');
}
function handleRemoveItem(index) {
// if use handleChecked(index) will trigger  handleItemChecked and printed all //indexes everytime
actionCreators.removeItem(dispatch, value);
}
function handleItemChecked(index) {
console.log(index)
}
return (
<>
<input type="text" value={value} onChange={handleOnchange} />
<button onClick={handleAddItem}>+</button>
<List items={list} handleClick={handleRemoveItem} isCompeted={false} handleChecked={handleItemChecked}/>
</>
)
}

子组件：

const List = ({items, handleClick, isCompleted, handleChecked}) => {
return (
<ListWrapper>
{items && items.length > 0 && items.map((item, index) => {
return (
<ListWrapper.item key={`${item}${new Date()}${Math.random()}`}>
{/* if like this: onClick={handleChecked(index)} will cause the issue */}
{/* <li>{item}<input type="checkbox" onClick={handleChecked(index)}/></li> */}
<li>{item}<input type="checkbox" name={index} onClick={e => handleChecked(e.target.name)}/></li>
<button onClick={handleClick}>-</button>
</ListWrapper.item>
);
})}
</ListWrapper>
)
}

我发现如果在子组件中：列表，如果我需要获取项目的索引，我必须分配 name={index} .如果直接使用 handleChecked(index(，将导致其父组件(Todo(多次渲染问题。有没有更好的方法来处理这个案子？非常感谢您提前！

Answer 1

正如

Jonrsharpe所评论的那样：

<button onClick={handleClick}>-</button>

以下是修复它的 2 种已知方法：

<button onClick={() => handleClick(index)}>-</button>

或

<button onClick={handleClick.bind(this, index)}>-</button>

阅读相关内容： https://reactjs.org/docs/handling-events.html

希望帮助:)