React受控組件與非受控組件深入講解

更新時間：2022年12月26日 09:05:38 作者：落雪小軒韓

具體來說這是一種react非受控組件，其狀態(tài)是在input的react內部控制，不受調用者控制?？梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關知識，感興趣的朋友一起看看吧

一、非受控組件

表單中輸入類DOM的值現(xiàn)用現(xiàn)取

<script type="text/babel">
	//創(chuàng)建組件
	class Login extends React.Component{
		handleSubmit = (event)=>{
			event.preventDefault() //阻止表單提交
			const {username,password} = this
			alert(`你輸入的用戶名是：${username.value},你輸入的密碼是：${password.value}`)
		}
		render(){
			return(
				<form onSubmit={this.handleSubmit}>
					用戶名：<input ref={c => this.username = c} type="text" name="username"/>
					密碼：<input ref={c => this.password = c} type="password" name="password"/>
					<button>登錄</button>
				</form>
			)
		}
	}
	//渲染組件
	ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

二、受控組件

表單中輸入類DOM的值，隨著輸入，能把輸入的值維護到狀態(tài)state中，需要用的時候再從狀態(tài)中取出來。建議寫受控組件，可以減少ref的使用

<script type="text/babel">
	//創(chuàng)建組件
	class Login extends React.Component{
		//初始化狀態(tài)
		state = {
			username:'', //用戶名
			password:'' //密碼
		}
		//保存用戶名到狀態(tài)中
		saveUsername = (event)=>{
			this.setState({username:event.target.value})
		}
		//保存密碼到狀態(tài)中
		savePassword = (event)=>{
			this.setState({password:event.target.value})
		}
		//表單提交的回調
		handleSubmit = (event)=>{
			event.preventDefault() //阻止表單提交
			const {username,password} = this.state
			alert(`你輸入的用戶名是：${username},你輸入的密碼是：${password}`)
		}
		render(){
			return(
				<form onSubmit={this.handleSubmit}>
					用戶名：<input onChange={this.saveUsername} type="text" name="username"/>
					密碼：<input onChange={this.savePassword} type="password" name="password"/>
					<button>登錄</button>
				</form>
			)
		}
	}
	//渲染組件
	ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

三、高階函數(shù)（函數(shù)柯里化）實現(xiàn)

1、定義

（1）高階函數(shù)

如果一個函數(shù)符合下面2個規(guī)范中的任何一個，那該函數(shù)就是高階函數(shù)。

1.若A函數(shù)，接收的參數(shù)是一個函數(shù)，那么A就可以稱之為高階函數(shù)。

2.若A函數(shù)，調用的返回值依然是一個函數(shù)，那么A就可以稱之為高階函數(shù)。

常見的高階函數(shù)有：Promise、setTimeout、arr.map()等等

（2）函數(shù)的柯里化

通過函數(shù)調用繼續(xù)返回函數(shù)的方式，實現(xiàn)多次接收參數(shù)最后統(tǒng)一處理的函數(shù)編碼形式。

function sum(a){
	return(b)=>{
		return (c)=>{
			return a+b+c
		}
	}
}

2、實現(xiàn)

<script type="text/babel">
	class Login extends React.Component{
		state = {
			username:'', //用戶名
			password:'' //密碼
		}
		//保存表單數(shù)據(jù)到狀態(tài)中
		saveFormData = (dataType)=>{
			return (event)=>{
				this.setState({[dataType]:event.target.value})
			}
		}
		//表單提交的回調
		handleSubmit = (event)=>{
			event.preventDefault() //阻止表單提交
			const {username,password} = this.state
			alert(`你輸入的用戶名是：${username},你輸入的密碼是：${password}`)
		}
		render(){
			return(
				<form onSubmit={this.handleSubmit}>
					用戶名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
					密碼：<input onChange={this.saveFormData('password')} type="password" name="password"/>
					<button>登錄</button>
				</form>
			)
		}
	}
	ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

onChange綁定的必須是一個函數(shù)，this.saveFormData()調用saveFormData 函數(shù)的返回值是一個函數(shù)

四、不用函數(shù)柯里化的實現(xiàn)

<script type="text/babel">
	class Login extends React.Component{
		state = {
			username:'', //用戶名
			password:'' //密碼
		}
		//保存表單數(shù)據(jù)到狀態(tài)中
		saveFormData = (dataType,event)=>{
			this.setState({[dataType]:event.target.value})
		}
		//表單提交的回調
		handleSubmit = (event)=>{
			event.preventDefault() //阻止表單提交
			const {username,password} = this.state
			alert(`你輸入的用戶名是：${username},你輸入的密碼是：${password}`)
		}
		render(){
			return(
				<form onSubmit={this.handleSubmit}>
					用戶名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
					密碼：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
					<button>登錄</button>
				</form>
			)
		}
	}
	//渲染組件
	ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

this.saveFormData()調用saveFormData 函數(shù)返回一個值然后放在一個函數(shù)里面

到此這篇關于React受控組件與非受控組件深入講解的文章就介紹到這了,更多相關React受控組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: