1. Function Component
|
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 |
<!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"> const { useState } = React; const App = () => { const [username, setUsername] = useState('Micheal Jackson...') const [gender, setGender] = useState('1') const [languages, setLanguages] = useState(["Javascript", "PHP"]) const handleChangeCheckbox = (e) => { let value = e.target.value; if (e.target.checked) { setLanguages([...languages, value]) } else { setLanguages(oldLanguages => oldLanguages.filter(item => item !== value)) } } console.log({username, gender, languages}) return ( <div> <input value={username} type="text" name="username" onChange={(e)=>setUsername(e.target.value)} /><br /><br /> <select name="gender" value={gender} onChange={(e)=>setGender(e.target.value)}> <option value="0">Nam</option> <option value="1">Nữ</option> </select><br /><br /> <input type="radio" id="gender0" name="gender" value="0" onChange={(e)=>setGender(e.target.value)} checked={gender == "0"} /> <label htmlFor="gender0">Nam</label> <input type="radio" id="gender1" name="gender" value="1" onChange={(e)=>setGender(e.target.value)} checked={gender == "1"} /> <label htmlFor="gender1">Nữ</label><br /><br /> <input type="checkbox" name="languages" id="language0" value="Javascript" onChange={handleChangeCheckbox} checked={languages.includes("Javascript")} /> <label htmlFor="language0">Javascript</label><br /> <input type="checkbox" name="languages" id="language1" value="PHP" onChange={handleChangeCheckbox} checked={languages.includes("PHP")} /> <label htmlFor="language1">PHP</label><br /> <input type="checkbox" name="languages" id="language2" value="C++" onChange={handleChangeCheckbox} checked={languages.includes("C++")} /> <label htmlFor="language2">C++</label><br /> <p>Username: <span>{username}</span></p> <p>Gender: <span>{gender}</span></p> <p>Languages: <span>{languages.join(", ")}</span></p> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); </script> </body> </html> |
2. Class Component
|
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 { constructor(props) { super(props); this.state = { username: 'Micheal Jackson...', gender: '1', languages: ["Javascript", "PHP"], } }; handleChangeInput = (e) => { this.setState({ [e.target.name]: e.target.value }); } handleChangeCheckbox = (e) => { let value = e.target.value; let languages_array = this.state.languages; if (e.target.checked) { languages_array.push(value); } else { languages_array = languages_array.filter(item => item !== value) } this.setState({ [e.target.name]: languages_array }); } //cần set value và onchange cùng 1 lúc ở form render() { console.log(this.state); return ( <div> <input value={this.state.username} type="text" name="username" onChange={this.handleChangeInput} /><br /><br /> <select name="gender" value={this.state.gender} onChange={this.handleChangeInput}> <option value="0">Nam</option> <option value="1">Nữ</option> </select><br /><br /> <input type="radio" id="gender0" name="gender" value="0" onChange={this.handleChangeInput} checked={this.state.gender == "0"} /> <label htmlFor="gender0">Nam</label> <input type="radio" id="gender1" name="gender" value="1" onChange={this.handleChangeInput} checked={this.state.gender == "1"} /> <label htmlFor="gender1">Nữ</label><br /><br /> <input type="checkbox" name="languages" id="language0" value="Javascript" onChange={this.handleChangeCheckbox} checked={this.state.languages.includes("Javascript")} /> <label htmlFor="language0">Javascript</label><br /> <input type="checkbox" name="languages" id="language1" value="PHP" onChange={this.handleChangeCheckbox} checked={this.state.languages.includes("PHP")} /> <label htmlFor="language1">PHP</label><br /> <input type="checkbox" name="languages" id="language2" value="C++" onChange={this.handleChangeCheckbox} checked={this.state.languages.includes("C++")} /> <label htmlFor="language2">C++</label><br /> <p>Username: <span>{this.state.username}</span></p> <p>Gender: <span>{this.state.gender}</span></p> <p>Languages: <span>{this.state.languages.join(", ")}</span></p> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); </script> </body> </html> |
