React，onClick回調參數

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

陣營解釋其事件東西here。當你像這樣明確地調用事件處理程序時，你不會傳入與在典型事件處理程序中發送給您的相同內容。如果你需要像這樣明確地調用它，使用第四個參數，以便通過反應保持可用。否則，只需簡單地在你的事件處理程序中調用一個你需要的函數，然後在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') 
    } 
} 

Answer 2

你必須要小心ProxyEvents，甚至console.log'ing他們（在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> 
    } 
}