1

I am learning ReactJS and I met this problem: ReactJS Click event not working on <div/> but works on <input/> and <a/>, here is my code:

class Item extends React.Component {
    handleClick = (e) => {
        e.preventDefault();
        alert(this.props.avatarUrl);

    }
    render() {
        return (
            <li>
                <a onClick={this.handleClick}>
                    <div style={{ backgroundImage: "url(" + this.props.avatarUrl + ")", width: '92px', height: '105px', cursor: 'pointer' }} >
                    </div>
                </a>
            </li>
        );
    }
}

class ItemCategory extends React.Component {
    render() {
        var items = [];
        for (var i = 0; i < this.props.itemList.length; i++) {
            if (this.props.itemType == this.props.itemList[i].Type) {
                items.push(<Item avatarUrl={this.props.itemList[i].Avatar} key={i} />);
            }
        }
        return (
            <ul className="dropdown-menu" role="menu">
                {items}
            </ul>
        );
    }
}

class ItemNav extends React.Component {
    constructor(props) {
        //do sth
    }
    componentWillMount() {
        //do sth
    }
    render() {
        return (
            <div>
            //sth other
                <ItemCategory ItemList={sth} itemType="4" team={sth} />
            //sth other
            </div>
        );
    }
}

ReactDOM.render(<ItemNav />, $("#nav-content-wrapper")[0]);

Now my problem is, the click event in the code above works, however, if I remove the a tag in item component, like this:

class Item extends React.Component {
    handleClick = () => {
        alert(this.props.avatarUrl);
    }
    render() {
        return (
            <li>
                <div onClick={this.handleClick} style={{ backgroundImage: "url(" + this.props.avatarUrl + ")", width: '92px', height: '105px', cursor: 'pointer' }} >
                </div>
            </li>
        );
    }
}

the click event is not triggered at all, I tried use bind.(this) or write the handleClick as return function but not working.

Anyone knows what is the problem? really appreciate any answer.

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Joel
  • 11
  • 2
  • Component names need to at least have their first letter CAPITALIZED. This is because if they aren't, they're treated like DOM elements, not user-created components. – Andrew Li Dec 03 '17 at 23:58
  • yes, i do use capital component name in my original code, i replaced my component name when i copied my code to here. I have edited my original post – Joel Dec 04 '17 at 00:02
  • Hi Samuel, I used handleClick() before, it is not working, actually, if you want to access props or state in function inside of component, you d better use arrow function because in arrow function, keyword "this" is referring the component. – Joel Dec 04 '17 at 00:46
  • For the record. Your use of arrow functions is correct. `() =>` is equivalent to `bind()`. The scope of `this` will be the same either way. – Arman Charan Dec 04 '17 at 02:20

0 Answers0