# curry function
###### tags: `React` `Javascript`

高階函數
1. 接收參數為函數的函數
2. 傳回函數的函數

curry function : 通過函數調用繼續傳回函數，實現多次接收最後統一處理的方式。

<script type="text/babel">
class Demo extends React.Component {

state = { test : true }

render(){
return (
<form>
<input onChange={this.setStat('user')} name="user"/>
<input onChange={this.setStat('pass')} name="pass"/>
<input onChange={(event)=>{this.setStat2('pass',event.target.value)}} name="pass"/>
<button onClick={this.change}/>
</form>
)
}

//透過curry function 兩層函數收集到key跟value才能寫共用設定state方法
setStat = (type)=>{//這個函數傳入值為接收要在state設定的key
const test = this.state.test;
return (event) => { //傳回一個函數給dom呼叫
this.setState({ [type] : event}); //動態建立物件key
}
}

//目前情境不用curry function的解法
setStat2 = (type,event)=>{
this.setState({ [type] : event.target.value });
}
}

</script>
高階函數

接收參數為函數的函數
傳回函數的函數
curry function : 通過函數調用繼續傳回函數，實現多次接收最後統一處理的方式。

<script type="text/babel">
class Demo extends React.Component {

state = { test : true }

render(){
return (
<form>
<input onChange={this.setStat('user')} name="user"/>
<input onChange={this.setStat('pass')} name="pass"/>
<input onChange={(event)=>{this.setStat2('pass',event.target.value)}} name="pass"/>
<button onClick={this.change}/>
</form>
)
}

//透過curry function 兩層函數收集到key跟value才能寫共用設定state方法
setStat = (type)=>{//這個函數傳入值為接收要在state設定的key
const test = this.state.test;
return (event) => { //傳回一個函數給dom呼叫
this.setState({ [type] : event}); //動態建立物件key
}
}

//目前情境不用curry function的解法
setStat2 = (type,event)=>{
this.setState({ [type] : event.target.value });
}
}

</script>
WORKSPACES