React, onClick callback arguments

Question

why react set onClick callback three arguments?

nativeEvent can get by proxyEvent.nativeEvent. Why React set nativeEvent at the third argument.

If I click the button, console.log(args) give me Proxy, undefined, Event, the third argument is not what i want.

but in componentDidMount, call this.clickHandler, it give me null, null, 'b2c', the third argument 'b2c' that's what i want.

class ReactEventArgument extends React.Component{

    componentDidMount() {
        this.clickHandler(null, null, 'b2c');
    }

    render() {
        return <div>
            <Child clickHandler={this.clickHandler}></Child>
        </div>  
    }

    clickHandler = (e, v, type = 'b2c') => {
        console.log(Array.prototype.slice.call(arguments));
        console.log(e, v, type);
    
        //if I click the button, I get a wrong type, type is nativeEvent, not my argument.
    }
} 

class Child extends React.Component{
    render() {
        const {clickHandler} = this.props;
        return <div>
            <button type="button" onClick={clickHandler}>click me</button>
        </div>
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

I have to change the button like this:

<button type="button" onClick={e => clickHandler(e, null, undefined)}>click me too</button>

Chris · Accepted Answer · 2016-10-20 04:30:04Z

2

You have to be careful with ProxyEvents, even console.log'ing them (in Chrome for example) won't give you their true value as they are intended to be shortlived.

That aside, the simplest way is to do something like:

class Child extends React.Component{

    clickHandler(type = 'b2c') {
        console.log(type);  // 1) coming from button, then output will be foobar
                            // 2) coming from something else that 
                            //    doesn't pass in anything, output will be b2c
    }

    render() {
        return <div>
            <button type="button" onClick={() => this.clickHandler("foobar")}>click me</button>
        </div>
    }
}

answered Oct 20, 2016 at 4:30

Chris

58.9k34 gold badges158 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

I just noticed your comment to the other answer, regarding the third argument. Unless you need the "e" variable (for example, I sometimes use it for input values e.target.value), then just don't pass it through

Mike S. · Accepted Answer · 2016-10-20 04:11:13Z

1

React explains its event stuff here. When you call the event handler explicitly like this, you're not passing in the same stuff that react would send to you on in a typical event handler. If you need to call it explicitly like that, use a 4th argument so it remains usable by react. Otherwise, just simply call a function inside your event handler that does what you need and instead call that function inside componentWillMount.

For example:

class ReactEventArgument extends React.Component{

    componentDidMount() {
        this.customFunction('b2c');
    }

    render() {
        return <div>
            <Child clickHandler={this.clickHandler}></Child>
        </div>  
    }

    customFunction = (type) => {
      // do your stuff here
    }

    clickHandler = (e) => {
        this.customFunction('b2c')
    }
}

answered Oct 20, 2016 at 4:11

Mike S.

9515 silver badges14 bronze badges

1 Comment

Lin Du Over a year ago

thanks for reply. I know the doc. My question is there are three default arguments pass into the event callback. ProxyEvent, undefined, nativeEvent. If I use third argument, can cause a error. The default third argument nativeEvent is not what I expect.

Collectives™ on Stack Overflow

React, onClick callback arguments

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related