事件處理

1. 通過onXxx屬性指定事件處理函數(shù)（注意大小寫）

   1. React使用的是自定義（合成）事件，而不是使用的原生DOM事件——為了更好的兼容性
   2. React中的事件是通過事件委托方式處理的（委托給組件最外層的元素——為了更高效

2. 通過event.target得到發(fā)生事件的DOM元素對象

收集表單數(shù)據(jù)

1. 非受控組件：不能通過代碼來控制值，只能通過用戶行為操作值，通過DOM節(jié)點來處理數(shù)據(jù)
2. 受控組件：通過React的state作為數(shù)據(jù)唯一來源，通過變更函數(shù)調用setState方法更新數(shù)據(jù)的表單輸入元素。

// 非受控組件
   class Login extends React.Component{
        showData = (event)=>{
            event.preventDefault()//阻止表單提交
            let {username,password } = this
            alert(`你的用戶名是：${username.value},你的密碼是：${password.value}`)
        }
        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.showData}>
                    <div>
                        <label>用戶名：</label>
                        <input type="text" placeholder="請輸入用戶名" name="username" ref={(c)=>{this.username = c}}/>
                    </div>
                    <div>
                        <label>密碼：</label>
                        <input type='password' placeholder="請輸入密碼" name="password" ref={(c)=>{this.password = c}}/>
                    </div>
                    <button>登錄</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById("test"))

// 受控組件
 class Login extends React.Component{
        state = {
            username:"",
            password:""
        }
        showData = (event)=>{
            event.preventDefault()//阻止表單提交
            let {username,password } = this.state
            alert(`你的用戶名是：${username},你的密碼是：${password}`)
        }
        setUserName = (e)=>{
            this.setState({
                username:e.target.value
            })
        }
        setPWD = (e)=>{
            this.setState({
                password:e.target.value
            })
        }
        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.showData}>
                    <div>
                        <label>用戶名：</label>
                        <input type="text" placeholder="請輸入用戶名" name="username" onChange={this.setUserName}/>
                    </div>
                    <div>
                        <label>密碼：</label>
                        <input type='password' placeholder="請輸入密碼" name="password" onChange={this.setPWD}/>
                    </div>
                    <button>登錄</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById("test"))

高階函數(shù)

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

• 若A函數(shù)，接收的參數(shù)是一個函數(shù)，則A為高階函數(shù)
• 若A函數(shù)，調用的返回值依然是一個函數(shù)，則A為高階函數(shù)

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

函數(shù)的柯里化

通過函數(shù)調用繼續(xù)返回函數(shù)的方式，實現(xiàn)多次接收參數(shù)最后統(tǒng)一處理的函數(shù)編碼形式文章來源地址http://www.zghlxwxcb.cn/news/detail-524904.html

到了這里，關于React從入門到實戰(zhàn)-事件處理，受控組件與非受控組件的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！