Как получить идентификатор элементов в ReactJS в карте функций? - PullRequest
Новая
       21

Как получить идентификатор элементов в ReactJS в карте функций?

0 голосов
/ 15 декабря 2018

Как я могу получить идентификатор элементов списка в функции карты? 

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>)
    }
}

Консоль печатает только идентификатор последнего элемента

enter image description here

in cnsole when click on links

enter image description here

1 Ответ

0 голосов
/ 15 декабря 2018

Использование onClick={() => this.handleSort(entry.id)} не вызовет вашу функцию при нажатии, она назначит то, что ваша функция возвращает событию щелчка.

Следующий код предварительно конфигурирует вашу функцию для отправки идентификатора вашей записи, а также аргументов события click, используя функции стрелок: 

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-узел, что может быть причиной того, что используется только последняя ссылка.

Если вы используете последнюю версию 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>
        )
    }
}
...