React Blur hiển thị thông tin cần tìm kiếm sau khi nhập dữ liệu vào ô cần tìm

React Blur hiển thị thông tin cần tìm kiếm sau khi nhập dữ liệu vào ô cần tìm

Khi bạn chuyển tiền trên các app như vietcombank hay teckcombank thì chỉ cần nhập thông tin stk vào app sẽ hiển thị thông tin tài khoản dưới đây là demo app theo phương pháp đó

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios';
import { If } from 'react-if';
import { Then, Else } from 'react-if';

function App() {
  const [statusreturn, setStatusreturn] = useState(false);
  const [mantt, setMantt] = useState<String>();
  const [datareturn, setDatareturn] = useState([]);
  const onBlur = (event) => {
    let dataevent = event.target.value;
    if (dataevent.length > 0) {
      //alert(dataevent);
      axios.get('https://miniapp.xxx.com/api//C0000' + dataevent).then((response) => {
        console.log(response);
        if (response.status === 200) {
          setDatareturn(response.data.data);
          setStatusreturn(response.data.status);
          console.log(datareturn);
        }
      });
    } else {
      alert(dataevent);
    }
  }

  return (
    <div className="App">
      <input type="text" className="input-text" placeholder="nhap thong tin" onBlur={() => onBlur(event)}></input>
      <If condition={statusreturn}>
        <Then>
          <h3>{datareturn.manTT}</h3>
        </Then>
        <Else>
          <h3>Không có tên </h3>
        </Else>
      </If>
      <h3>{ }</h3>
      <button className="btn btn-darger">Check</button>
    </div>
  )
}

export default App