|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!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>ReactJS</title> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> class App extends React.Component { customer; constructor(props) { super(props); this.customText = "hahaha, this is cutom text" this.onClickConstruct = this.onClickConstruct.bind(this, this.customText) } //biến event tự động được gán vào hàm khi được gọi bằng phương thước event trong render //event này là event của react, không giống event của javascript //thường hay lấy: even.target để lấy element đc action bởi event onClickNormal(e) { console.log("props: ",this.customer) //Không thể sử dụng "console.log("Props: ",this.props)" ở đây //vì ở hàm này là 1 funtion bình thường của onclick trong object của "button" có dạng: onclick = function(){} // => vì vậy "this" sẽ trỏ về "button" console.log(e, e.target); alert('onClickNormal'); } onClickArrowFuntion(e) { //Có thể sử dụng "console.log("Props: ",this.props)" ở đây //vì ở hàm này là 1 funtion bình thường => "this" sẽ trỏ về thằng cha của nó //mà thằng cha của nó lại là 1 arrow funtion => nên "this" lại chính là "this" của thằng arrow-function đó //arrowfunction đó của onclick trong object của "button" có dạng: onclick = ()=>{} // => 'this' của arrowfunction lại là thằng chứa thằng "button" => chính là đối tượng của class này :v hahaha console.log(e, e.target); alert('onClickArrowFuntion'); } onClickArrowFuntion2 = (e) => { //được dùng "this", vì đây là arrowfuntion => this sẽ trỏ về đối tượng của class console.log("Props: ",this.props) console.log(e, e.target); alert('onClickArrowFuntion2'); } //Muốn sử dụng "this" như "this.props" thì cần "bind(this)" vào khi gọi hàm, nếu không sẽ gây ra lỗi onclickBind(text) { console.log("Props: ", this.props); alert(text); } onClickConstruct(text) { console.log("Props: ", this.props); alert(text); } onClickBindAndArrowFunction(event, text) { console.log("Props: ", this.props); console.log(event); alert(text); } //1. Có thể dùng function 1 cách trực tiếp //2. Có thể bind this và param trong html //3. Cũng có thể bind khi gọi biến tại constructor //4. Cũng có thể dùng arrow funtion để gọi hàm render() { return ( <div> <button type="button" className="btn btn-default" onClick={this.onClickNormal}> onClickNormal ! </button><br /><br /> <button type="button" className="btn btn-default" onClick={(e) => this.onClickArrowFuntion(e)}> onClickArrowFuntion ! </button><br /><br /> <button type="button" className="btn btn-default" onClick={this.onClickArrowFuntion2}> onClickArrowFuntion2 ! </button><br /><br /><hr /><br /> <button type="button" className="btn btn-default" onClick={this.onclickBind.bind(this, this.customText)}> onclickBind ! </button><br /><br /> <button type="button" className="btn btn-default" onClick={this.onClickConstruct}> onClickConstruct ! </button><br /><br /> <button type="button" className="btn btn-default" onClick={(event) => this.onClickBindAndArrowFunction(event, this.customText)}> onClickBindAndArrowFunction ! </button><br /><br /> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); </script> </body> </html> |
Tutorial – 3. Event, sử dụng ‘this’ trong Class
Author: admin - Posted: 15/07/21 - Update: 15/07/21
