是什么使用返回功能，调用该函数

我有一些代码，如下是什么使用返回功能，调用该函数

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本身的箭头函数。 –

是什么使用返回功能，调用该函数

回答

相关问题