React事件處理和表單的綁定詳解
一、事件處理
1.1 React事件
React 元素的事件處理和 DOM 元素類似。但是有一點語法上的不同:
- React 事件綁定屬性的命名采用駝峰式寫法,而不是小寫。 例如onclick屬性應(yīng)該寫成
onClick
。 - 如果采用 JSX的語法你需要傳入一個函數(shù)作為事件處理函數(shù),而不是一個字符串(DOM 元素的寫法)。例如已經(jīng)定義了一個名為handleClick的函數(shù),應(yīng)該這樣調(diào)用:
<button onClick={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->handleClick}>Button</button>
而不是:
<button onClick="handleClick()">Button</button>
1.2 事件對象
在事件發(fā)生時調(diào)用的函數(shù),默認(rèn)是自帶一個參數(shù)的,這個參數(shù)通常被命名為event
,就是事件對象。
例如,我們?yōu)橐粋€input輸入框的onchange事件設(shè)置一個函數(shù),獲取事件對象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>EventObject</title> <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script> <!-- 生產(chǎn)環(huán)境中不建議使用 --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> class MyInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange(event) { console.log(event); console.log(event.target); } render() { return ( <div> <span>Input:</span> <input type="text" onChange={this.handleChange} /> </div> ); } } ReactDOM.render(<MyInput />, document.getElementById("app")); </script> </body> </html>
可以看到,event.target就是觸發(fā)事件的dom元素。
1.3 事件傳參
除了自帶的默認(rèn)參數(shù)(事件對象)外,有時候我們需要額外傳遞傳輸給事件處理的函數(shù),這個時候不能直接調(diào)用函數(shù)并傳參,例如下面的用法是錯誤的:
<input type="text" onChange={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->this.handleChange(1)} />
正確的用法應(yīng)該是使用匿名函數(shù)來實現(xiàn)傳參:
<input type="text" onChange={() => this.handleChange(event, "id")}/>
此時處理函數(shù)handleChange:
handleChange(event, id) { console.log(event.target.value); console.log(id); }
第一個參數(shù)一定是事件對象,后面的參數(shù)名稱隨意,但是順序必須一一對應(yīng)。
1.4 函數(shù)組件事件處理
通過上面的例子不難看出,class組件有一個非常麻煩的點在于必須在構(gòu)造函數(shù)中聲明并綁定方法的this:
右邊中的this:這個this是在構(gòu)造器方法中的,所以它的指向是組件的實例對象;
右邊handleChange方法:這個方法是在類的原型對象上的;而使用bind的函數(shù)把這個原型對象方法上的this修改成類實例對象上的this,右邊的代碼執(zhí)行完成之后生成一個新的函數(shù),然后把這個新函數(shù)放到實例的自身上也就是等式的左邊,且給這個函數(shù)起了一個名字(左邊方法名),這樣就能解決原型方法上其他方法調(diào)用該方法this指向是undefined的問題了。此時其他方法調(diào)用該函數(shù)時this就指向的是實例對象了
而函數(shù)式組件中,就簡單了許多:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>EventObject</title> <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script> <!-- 生產(chǎn)環(huán)境中不建議使用 --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> function MyInput() { function handleChange(event, id) { console.log(event.target.value); console.log(id); } return ( <div> <span>Input:</span> <input type="text" onChange={() => handleChange(event, "id")} /> </div> ); } ReactDOM.render(<MyInput />, document.getElementById("app")); </script> </body> </html>
二、表單
雙向綁定
在vue中,可以使用v-model指令實現(xiàn)表單的雙向綁定,但是實際上,v-model只是v-bind和v-on的語法糖,在react中,我們可以直接利用屬性和屬性改變的處理事件實現(xiàn)雙向綁定的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Form</title> <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script> <!-- 生產(chǎn)環(huán)境中不建議使用 --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> class HelloMessage extends React.Component { constructor(props) { super(props); this.state = { value: "Hello React!" }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } render() { let value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <h4>{value}</h4> </div> ); } } ReactDOM.render(<HelloMessage />, document.getElementById("app")); </script> </body> </html>
到此這篇關(guān)于React事件處理和表單的綁定詳解的文章就介紹到這了,更多相關(guān)React事件處理 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- React如何利用Antd的Form組件實現(xiàn)表單功能詳解
- react使用antd的上傳組件實現(xiàn)文件表單一起提交功能(完整代碼)
- React表單容器的通用解決方案
- react?表單數(shù)據(jù)形式配置化設(shè)計
- react實現(xiàn)動態(tài)表單
- React?Hook?Form?優(yōu)雅處理表單使用指南
- react表單受控的實現(xiàn)方案
- React實現(xiàn)表單提交防抖功能的示例代碼
- React中重新實現(xiàn)強制實施表單的流程步驟
- react實現(xiàn)動態(tài)增減表單項的示例代碼
- React 實現(xiàn)表單組件的示例代碼
相關(guān)文章
使用React+ts實現(xiàn)無縫滾動的走馬燈詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于使用React+ts實現(xiàn)無縫滾動的走馬燈詳細(xì)過程,文中給出了詳細(xì)的代碼示例以及圖文教程,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-08-08react嵌套路由實現(xiàn)TabBar的實現(xiàn)
本文主要介紹了react嵌套路由實現(xiàn)TabBar的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08