---
# System prepended metadata

title: curry function
tags: [Javascript, React]

---

# 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
