如何使用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适当获取项目索引?的主要内容,如果未能解决你的问题,请参考以下文章

React16.8的新增特性,Hook讲解

React16.8的新增特性,Hook讲解

React Hook

React Hook的使用

react hook 新特性汇总

React Hook