Question

为什么反应设置onClick回调三个参数？

nativeEvent可以通过proxyEvent.nativeEvent获得。为什么在第三个参数处反应set nativeEvent。

如果我点击按钮，console.log(args)给我Proxy, undefined, Event，第三个参数不是我想要的。

但在componentDidMount，请致电this.clickHandler，它会给我null, null, 'b2c'，第三个参数'b2c'就是我想要的。

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>

我必须像这样更改button：

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

Answer 1

您必须小心使用ProxyEvents，即使是console.log（例如在Chrome中）也不会为您提供真正的价值，因为它们是短暂的。

除此之外，最简单的方法是做类似的事情：

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>
    }
}

Answer 2

React解释了它的事件内容here。当您像这样明确地调用事件处理程序时，您并没有传递响应会在典型事件处理程序中发送给您的相同内容。如果需要像这样明确地调用它，请使用第4个参数，以便它通过react保持可用。否则，只需在事件处理程序中调用一个函数来执行您需要的操作，然后在componentWillMount中调用该函数。

例如：

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')
    }
}

React，onClick回调参数

2 个答案: