Реагировать - onClick возвращает 'null undefined' при нажатии на <li>

Question

Я создал список изображений в React.У меня есть имя каждого изображения, отображаемое на экране, и я хочу, чтобы URL-адрес сохранялся в состоянии, когда кто-то нажимает на имя изображения.

Когда я нажимаю на одно из имен изображения, яполучить null undefined.Что я делаю не так?

import React from 'react'

const images = [
    { name: 'Image 1', url: 'https://some.com' },
    { name: 'Image 2', url: 'https://thing.com' }
]

class Imglist extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            url: null
        }
    }

    onClick(event) {
        this.setState(event.value)
        return console.log(this.state.url, event.value)
    }

    render() {

        var that = this

        return (
            <div>
                <ul>
                    {images.map(function(element, index) {
                       return <li key={index} onClick={that.onClick.bind(that)}>{element.name}</li>
                    })}
                </ul>
            </div>
        )
    }
}

export default Imglist

Answer 1

event.target.value используется для получения значения формы, а не события щелчка.

Попробуйте:

 <ul>
     {images.map(function(element, index) {
       return <li key={index} onClick={e => this.onClick(element)}>{element.name}</li>
     })}
</ul>

и ваш onClick должен быть

onClick(element) {
  this.setState({url: element.url}, () => {
    console.log(this.state.url, event.target.value)
   })
}

Answer 2

import React from 'react'

const images = [
    { name: 'Image 1', url: 'https://some.com' },
    { name: 'Image 2', url: 'https://thing.com' }
]

class Imglist extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            url: null
        }

        this.onClick = this.onClick.bind(this); // <-- bind early
    }

    onClick(element) {
        // setState is async, so your code does not work. to make it works, add your console log in a callback.

        this.setState({url: element.url}, () => {
            console.log(this.state.url, event.value)
         })
    }

    render() {

        var that = this

        return (
            <div>
                <ul>
                    {images.map(function(element, index) { // <-- you can use arrow func, so that you don't need to assign this to that.
                       return <li key={index} onClick={() => that.onClick(element)}>{element.name}</li>
                    })}
                </ul>
            </div>
        )
    }
}

export default Imglist

Answer 3

Ваша onClick функция должна иметь значение

onClick(url) {
  this.setState({url}, () => {
    console.log(this.state.url, url)
   })
}

Нет необходимости return a console, а this.setState является функцией async, вам следует использовать обратный вызов для получения правильного значения,И используйте arrow function, когда map

// JSX
{images.map(({name, url}, index) => {
   return <li key={index} onClick={() => this.onClick(url)}>{name}</li>
 })}