onMouseOver在react.js应用程序中不起作用

Question

I am trying to use onMouseOver to trigger a function that updates the state. However, in testing onMouseOver with a console.log, it does not spit anything out into console on hover:

render: function() {

        return (

        <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionEnterTimeout={600} transitionAppearTimeout={600} transitionLeaveTimeout={300}>


                    <ul className="icons">{ iconslist.map(function(i){
                            return <li key={i.id}><span className={i.class} id={i.id} data-id={i.data} onMouseOver={console.log("hello")}></span></li>

                        }) }

                    </ul>
                    <p className="icon-text">{iconslist[this.state.icon_id].name}</p>


        </ReactCSSTransitionGroup>

        );

    }

Answer 1

Looks like you need to supply a callback opposed to calling console.log.

<ReactComponent
    onMouseOver={() => console.log('enter')}
/>