是什麼使用返回功能，調用該函數

我有一些代碼，如下是什麼使用返回功能，調用該函數

var React = require('react'); 

var Controls = React.createClass({ 
propTypes: { 
    countdownStatus: React.PropTypes.string.isRequired, 
    onStatusChange: React.PropTypes.func.isRequired 
}, 

onStatusChange(newStatus) { 
    return()=>{ 
     this.props.onStatusChange(newStatus); 
    } 
    // this.props.onStatusChange(newStatus); 
}, 

render() { 
    var {countdownStatus} = this.props; 
    var renderStartStopButton =()=>{ 
     if(countdownStatus == 'started') { 
      return (
       <button className="button secondary" 
        onClick={this.onStatusChange('paused')} 
       >Pause</button> 
      ) 
     } else if(countdownStatus == 'paused') { 
      return (
       <button className="button primary" 
        onClick={this.onStatusChange('started')} 
       >Start</button> 
      ) 
     } 
    } 

    return(
     <div className="controls"> 
      {renderStartStopButton()} 
      <button className="button alert hollow" 
       onClick={this.onStatusChange('stopped')} 
      >Clear</button> 
     </div> 
    ) 
} 
}) 

module.exports = Controls;

我的問題是在onStatusChange（NEWSTATUS）的功能的不同，這將是錯誤的，使用其他的註釋語句比返回一個匿名函數。但是我無法得到返回函數和直接調用函數的區別。

任何人都可以請幫助解釋的區別？非常感謝你！

來源

2017-09-26 Richard D

看到這個https://stackoverflow.com/questions/41688366/react-what-is-this-arrow-function-doing-in-the-props-for-tic-tac-toe-game/41688664#41688664 –

感謝Shubham，現在的工作 –

您可以通過更改您的onStatusChange(newStatus)爲箭頭的功能也可以直接調用它。

onStatusChange => (newStatus) { 
    this.props.onStatusChange(newStatus); 
} 

<button className="button secondary" 
    onClick={() => this.onStatusChange('paused')} 
>Pause</button>

或按

<button className="button alert hollow" 
    onClick={this.onStatusChange.bind(this,'stopped')} 
>Clear</button>

的原因是箭頭功能結合上下文，這裏的綁定this和傳球無論在參數列表中。在第二個例子中，如果不使用箭頭功能必須傳遞this與參數（一個或多個）一起。

來源

2017-09-26 12:04:34

嗨SYAM皮萊，感謝您的回覆。您的解決方案2和3很好地通過測試。但是，第一個解決方案，我發現我仍然需要將它綁定onClick以使其工作。對於箭頭功能，你的意思是「onStatusChange：（newStatu）=> {this.props.onStatusChange（NEWSTATUS）}」？如果我使用onClick = {this.onStatusChange（'stopped'）}將會出錯。但是，這將是很好用的onClick = {（）=> {this.onStatusChange（ '停止'）} –

喔，是的，我的錯誤。第一個只能用於第二個，因爲你必須通過參數 –

看起來不需要使用onStatusChange本身的箭頭函數。 –

是什麼使用返回功能，調用該函數

回答

相關問題