Untitled
plain_text
2 months ago
3.3 kB
2
Indexable
Never
import { useState } from "react"; import axios from "axios"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; import "./App.css"; function App() { var [binBank, setBinBank] = useState(""); var [accountNumber, setAccountNumber] = useState(""); var [state, setState] = useState(0); var [amount, setAmount] = useState(0); var [message, setMessage] = useState(""); var [accountName, setAccountName] = useState(""); var [url, setURL] = useState(""); var [opt, setOtp] = useState<any>([ { label: "AGRIBANK" }, { label: "QTBANK" }, ]); const handleAccountNumber = (e: any) => { setAccountNumber(e.target.value); }; const handleAmount = (e: any) => { setAmount(e.target.value); }; const handleAccountName = (e: any) => { setAccountName(e.target.value.toUpperCase()); }; const handleMessage = (e: any) => { setMessage(e.target.value); }; if (state === 0) { setState(1); // console.log(5); axios.get("https://api.vietqr.io/v2/banks", {}).then((response) => { var Options = []; for (var i = 0; i < response.data["data"].length; i++) { Options.push({ label: response.data["data"][i]["shortName"], binCode: response.data["data"][i]["bin"], }); } setOtp(Options); }); } const handleBin = (_1: any, value: any, _2: any, _3: any) => { // e.target --> React Component --> khong co field 'value' // e.target cua cac cai khac --> HTML DOM --> co field 'value' setBinBank(value.binCode); }; const createQRcode = () => { var URL = `https://img.vietqr.io/image/${binBank}-${accountNumber}-compact2.pgn?amount=${amount}&addInfo=${message}&accountName=${accountName}`; setURL(URL); }; // call fb return ( <div> <input className="accountNumber" onChange={handleAccountNumber} placeholder="Nhập số tài khoản tại đây" /> <br></br> <Autocomplete className="banks" disablePortal options={opt} onChange={handleBin} sx={{ width: "50%" }} renderInput={(params) => <TextField {...params} label="Ngân hàng" />} /> <input className="message" onChange={handleMessage} placeholder="Mời nhập nội dung chuyển khoản" /> <tr></tr> <input className="amount" onChange={handleAmount} placeholder="Nhập số tiền bạn muốn chuyển" /> <tr></tr> <input className="accountName" onChange={handleAccountName} placeholder="Tên tài khoản" /> <tr></tr> <button className="Button" type="button" onClick={createQRcode}> Click to get QR code </button> <tr> </tr> <img src={url} alt="" /> </div> ); } // AutoComplete: // { disablePortal: true, options=..., onChange=handleBin } // Javascript co mot cai Event Listener // Luc load trang => Then Event Listener chay vo han // Neu value cua Autocomplete thay doi => Then Event Listener se goi ham Autocomplete.onChange export default App;