How to get the index of clicked element?

I have some list item, and I want know which one is clicked by user, so I set onClik on every <li> item, and I user event.target to get the node clicked, but I get this issue, my <li> items has children nodes, when user click the children inside the <li> element, event.target is not the element I want, how do I fix it?

my code:

var React = require('react');
var ReactDOM = require('react-dom');

var CC = React.createClass({

    handleClick: function(e) {
        console.log(e.target.getAttribute('data-key'));
    },

    render: function() {
        var s = {
            border: '1px solid #ddd',
            display: 'block',
            padding: '10px'
        };
        var items = this.props.arr.map(function(a, i) {
            return (
                <li key={i} onClick={this.handleClick} style={s} data-key={i}>
                    <img src="images/joy.png"/>
                </li>
                );
        }, this);

        return (
            <ul >
                {items}
            </ul>
            );
    }
});


var App = React.createClass({
    getInitialState: function () {
        return {
            arr: [1,2,3]
        };
    },

    render: function() {
        return (
            <div>
                <CC arr={this.state.arr}/>
            </div>
        );
    }
});

ReactDOM.render(<App/>, document.getElementById('app'));

when user click the <img> inside <li>, e.target.getAttribute('data-key') return null

I do can fix it by add the data-key attribute to all of <li> element’s children, like:

var items = this.props.arr.map(function(a, i) {
    return (
        <li key={i} onClick={this.handleClick} style={s} data-key={i}>
            <img src="images/joy.png" data-key={i} />
        </li>
        );
}, this);

but I don’t think it is a elegant way.

[yangshun]

I have written a jsfiddle to show you how it can be done without using data attributes at all. Basically you bind the index to the handleClick function and it will be passed into it as a parameter when it’s called.

https://jsfiddle.net/qmkqd7u6/3/

Also, this is a usage question, rather than a bug in the React core. Usage questions are better answered on sites like StackOverflow, try to use github issues for tracking bugs in the React core.

[jimfb]

@littlee Every minute we spend answering usage questions on github is one fewer minutes we can spend fixing React to make it better for everyone. That’s why we push people toward StackOverflow, where the answers are generally just as good (sometimes better) and don’t consume disproportionate amounts of our time.