如何在函数映射中获取 ReactJS 中元素的 id？

Question

如何在 map 函数中获取列表元素的 ID？

export default class PhotoSlider extends Component {
    handleSort(value) {
        console.log(value)
    }

    render() 
    {
        return photo.map((entry, index) => <Link to='#' onClick={() => this.handleSort(entry.id)}>... </Link>)
    }
}

控制台只打印最后一个元素的id

in cnsole when click on links

Answer 1

使用onClick={() => this.handleSort(entry.id)}不会在点击的时候调用你的函数，它会把你的函数returns赋值给点击事件。

以下代码预先配置您的函数以使用箭头函数发送条目的 ID 和点击事件参数：

export default class PhotoSlider extends Component {
    handleSort = value => event => {
        console.log(value)
    }

    render() 
    {
        return photo.map(entry => <Link to='#' onClick={this.handleSort(entry.id)}>... </Link>)
    }
}

此外，在使用地图时不要忘记为您的组件添加一个键：

photo.map(entry => <Link to='#' key={entry.id} onClick={this.handleSort(entry.id)}>... </Link>)

此外，请尝试在提问时正确缩进您的代码，就像我在编辑您的问题时所做的那样（例如）

编辑：我想我明白了：
在 React 中，您的渲染函数应该发送单个 HTML 节点，这可能是为什么只使用最后一个 Link 的原因。

如果您使用的是最新版本的 React，您可以将地图包装在片段中：

export default class PhotoSlider extends Component {
    handleSort = value => event => {
        console.log(value)
    }

    render() 
    {
        return (
            <>
                {photo.map(entry => <Link to='#' onClick={this.handleSort(entry.id)}>... </Link>)}
            </>
        )
    }
}

否则，只需使用 div（或 React.Fragment）：

export default class PhotoSlider extends Component {
    handleSort = value => event => {
        console.log(value)
    }

    render() 
    {
        return (
            <div>
                {photo.map(entry => <Link to='#' onClick={this.handleSort(entry.id)}>... </Link>)}
            </div>
        )
    }
}

如何在函数映射中获取 ReactJS 中元素的 id？

How to get id of elements in ReactJS in function map?

reactjs

onclick

map-function