如何使用React 16.8 Hook适当获取项目索引?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用React 16.8 Hook适当获取项目索引?相关的知识,希望对你有一定的参考价值。
我正在使用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)出现很多渲染问题。有没有更好的方法来处理这种情况?非常感谢您!
答案
如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
希望有所帮助:)
以上是关于如何使用React 16.8 Hook适当获取项目索引?的主要内容,如果未能解决你的问题,请参考以下文章