យើងបានឃើញរួចមកហើយថា នៅក្នុងការយកក្បួនភ្ជាប់ហេតុការណ៍ណាមួយមកប្រើ គឺត្រូវយកវត្ថុដែលជាក្បួននោះមកប្រើ ហើយក្បួននឹងត្រូវ call ជាស្វ័យប្រវត្តិ នៅពេលដែលហេតុការណ៍នៅជាប់នឹងក្បួននោះបានកើតឡើង។ ក៏ប៉ុន្តែ បើសិនជាយើងចង់យកក្បួនភ្ជាប់ហេតុការណ៍មកប្រើតាមរបៀប call យើងចាំបាច់ត្រូវយកក្បួននោះមកប្រើនៅក្នុងវត្ថុដែលជាក្បួនណាមួយផ្សេងទៀត។ ហើយជាទូទៅ គេចូលចិត្តយក្បួនភ្ជាប់ហេតុការណ៍មកប្រើ នៅក្នុងវត្ថុដែលជាក្បួនសញ្ញាព្រួញ។
import './App.css'
import './styles/global.css'
import Header from './components/header'
function App() {
return (
<div className="App">
<Header />
</div>
)
}
export default App
import '../styles/header.css'
import {useState} from 'react'
function Header(){
const [title, setTitle] = useState('កម្មវិធី React')
function handleSubmit(e, arg){
e.preventDefault()
alert(arg)
}
return (
<div className="Header ">
<div class='wrapper region'>
<div class='logo' onMouseOver={()=>setTitle('កម្មវិធីកំពុងដំណើរការ')} onMouseOut={()=>setTitle('កម្មវិធី React')}>
<a>{title}</a>
</div>
<form class='search' onSubmit={(e)=>handleSubmit(e, 'Submit!')}>
<input type="text" name='q' required />
<input type='submit' value='បញ្ជូន' />
</form>
<div class='logout'>ទំព័រដើម | ចូលក្នុង</div>
</div>
</div>
)
}
export default Header
.Header{
background: var(--background-dark);
color: white;
padding: 5px 0;
}
.Header .wrapper{
display: grid;
grid-template-columns: 30% auto 25%;
align-items: center;
}
.Header .wrapper .logo{
font: 30px/1.5 Anton, Limonf3;
}
.Header .wrapper .search{
display: grid;
grid-template-columns: auto 20%;
}
.Header .wrapper .search input{
font: 14px/1.5 Vidaloka, OdorMeanChey;
padding: 0 10px;
}
.Header .wrapper .logout{
text-align: right;
font-size: 18px;
}