3.React事件處理、收集表單資料、高階函式
3.1事件處理
class Demo extends React.Component {
/*
1. 通過onXxx屬性指定事件處理函式(注意大小寫)
a) React使用的是自定義(合成)事件, 而不是使用的原生DOM事件
----為了更好的相容性
b) React中的事件是通過事件委託方式處理的(委託給元件最外層的元素)
----為了高效
2. 通過event.target得到發生事件的DOM元素物件
----不要過度使用ref
*/
// 建立ref容器
myRef = React.createRef()
showData = () => {
console.log(this.myRef.current)
alert(this.myRef.current.value)
}
// 回到函式接收一個事件源
showData2 = (event) => {
console.log(event.target)
alert(event.target.value)
}
render(){
return (
<div>
<label>
<input ref={this.myRef} type="text" placeholder="點選按鈕顯示資料" />
</label>
<button onClick={this.showData}>點我提示左側的資料</button>
{/* 要取的資料在發生事件的事件源，可以省略ref */}
<input onBlur={this.showData2} type="text" placeholder="失去焦點顯示資料" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('test'))
3.2 非受控元件
class Login extends React.Component {
// 非受控: 現用現取不通過state更新
handleSubmit = (event) => {
event.preventDefault() // 阻止表單提交
const {username, password} = this
alert(`${username.value}, ${password.value}`)
}
render(){
return (
<form action="http://www.baidu.com" 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>
)
}
}
3.3 受控元件
class Login extends React.Component {
// 初始化狀態
state = {
username: '',
password: ''
}
handleSubmit = (event) => {
event.preventDefault() // 阻止表單提交
const {username, password} = this.state
alert(`${username}, ${password}`)
}
// 受控： 隨著輸入立刻更新狀態
saveUsername = (event) => {
this.setState({
username: event.target.value
})
}
savePassword = (event) => {
this.setState({
password: event.target.value
})
}
render(){
return (
<form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
使用者名稱： <input onChange={this.saveUsername} type="text" name="username"/>
密碼： <input onChange={this.savePassword} type="password" name="password"/>
<button>登入</button>
</form>
)
}
}
3.4函式柯里化（高階函式）
/*
高階函式：符合以下之一，即為高階函式
1.若A函式，接收的引數是一個函式，那麼A就可以稱之為高階函式
2.若A函式，呼叫後的返回值依然是一個函式，那麼A即可以稱之為高階函式
常見的高階函式有 Promise，setTimeout， arr.map()
函式的柯里化：通過函式呼叫繼續返回函式的方式，實現多次接收函式最後統一處理的函式編碼形式
function sum(a) {
return (b) => {
return (c) => {
return a + b + c
}
}
}
const result = sum(1)(2)(3)
console.log(result)
* */
class Login extends React.Component {
// 初始化狀態
state = {
username: '',
password: ''
}
// 受控： 隨著輸入立刻更新狀態
handleSubmit = (event) => {
event.preventDefault() // 阻止表單提交
const {username, password} = this.state
alert(`${username}, ${password}`)
}
// 儲存表單資料到狀態中
saveFormData = (dataType) => {
// 返回一個回撥函式給onChange，接收event事件
return (event) => {
// console.log(dataType)
// console.log(event.target.value)
this.setState({
[dataType]: event.target.value
})
}
}
render(){
return (
<form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
使用者名稱： <input onChange={this.saveFormData('username')} type="text" name="username"/>
密碼： <input onChange={this.saveFormData('password')} type="password" name="password"/>
<button>登入</button>
</form>
)
}
}
3.5 不使用函式柯里化實現
class Login extends React.Component {
// 初始化狀態
state = {
username: '',
password: ''
}
// 受控： 隨著輸入立刻更新狀態
handleSubmit = (event) => {
event.preventDefault() // 阻止表單提交
const {username, password} = this.state
alert(`${username}, ${password}`)
}
// 儲存表單資料到狀態中
saveFormData (event, dataType) {
console.log(this)
this.setState({
[dataType]: event.target.value
})
}
render(){
return (
<form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
{/*其實就是將回調函式抽出來寫到這*/}
使用者名稱： <input onChange={(event) => {this.saveFormData(event, 'username')}} type="text" name="username"/>
密碼： <input onChange={(event) => {this.saveFormData(event, 'password')}} type="password" name="password"/>
<button>登入</button>
</form>
)
}
}