DEV Community

c_nooknook_daily_prompt
c_nooknook_daily_prompt

Posted on

เจาะลึกเหตุผลที่ JSX ใช้ onClick แบบ camelCase

#webdev #programming #javascript #beginners

คำว่า onClick (ตัว C ใหญ่) ที่เราใช้ใน JSX ไม่ได้เป็นแค่ "ตัวสะกดแปลก ๆ" แต่มีความเกี่ยวข้องลึกกับ JavaScript, JSX, DOM, และ React

ทำไมใน JSX เขียน onClick ไม่ใช่ onclick?

เพราะใน JSX เรากำลังเขียน JavaScript object syntax ที่ map ไปยัง DOM properties ไม่ใช่ HTML attributes

อธิบายแบบเข้าใจง่ายๆก็คือ

HTML ใช้ attribute → lowercase:

  • onclick = attribute ที่ browser อ่านได้จาก HTML 
<!-- HTML ธรรมดา -->
<button onclick="alert('hi')">Click</button>
Enter fullscreen mode Exit fullscreen mode

JSX ไม่ใช่ HTML → เป็น JavaScript

  • onClick = property ของ JavaScript object 
<button onClick={() => alert("hi")}>Click</button>
Enter fullscreen mode Exit fullscreen mode

React จะเอาค่าใน JSX ไปแปลงเป็น JavaScript เช่น:

React.createElement("button", {
  onClick: () => alert("hi")
});
Enter fullscreen mode Exit fullscreen mode

ที่สำคัญ: ใน DOM จริง ๆ onClick คือ property ของ DOM element (HTMLElement.prototype.onclick)

ชื่อ property ใน JavaScript = camelCase

ดังนั้น...

มุมมอง ใช้แบบไหน เพราะอะไร
HTML (แท้ ๆ) onclick เป็น HTML attribute
JSX (React) onClick เป็น JavaScript property (camelCase)

เกี่ยวข้องกับ object key ไหม?

เกี่ยว! เพราะ JSX จะถูกแปลงเป็น JavaScript object
และ key ของ object (เช่น onClick) ต้องเขียนให้ตรงกับ property ชื่อจริงใน DOM API
ซึ่งเป็น camelCase ตาม JavaScript convention

ตัวอย่าง JSX → JS:

<input type="text" onChange={handleChange} />
Enter fullscreen mode Exit fullscreen mode

--> จะกลายเป็น:

React.createElement("input", {
  type: "text",
  onChange: handleChange
});
Enter fullscreen mode Exit fullscreen mode

สรุป

  • onClick = React ใช้ JavaScript syntax → ต้อง camelCase
  • JSX ไม่ใช่ HTML → React จึงไม่ใช้ onclick แบบ HTML
  • เกี่ยวข้องกับ object key เพราะ JSX = การส่ง props เป็น object
  • React จะ map key เช่น onClick ไปยัง DOM property element.onclick = ...

Image description

โบนัส
การที่เราใช้ { สองครั้งใน JSX ของ React เพื่อกำหนด style นั้น เกี่ยวข้องกับการส่ง JavaScript object เข้าไป ใน props ของ JSX โดยตรง ซึ่งเรามาอธิบายกันแบบเข้าใจง่ายๆ:

🔍 โครงสร้างของ style ใน JSX
เมื่อเราเขียน JSX แบบนี้:

<div style={{ color: 'red' }}>Hello</div>
Enter fullscreen mode Exit fullscreen mode

มันมี { สองระดับเพราะว่า:

  • ชั้นนอก { ... }: เป็นการบอก React ว่า “ค่าที่อยู่ภายในนี้เป็น JavaScript expression” ไม่ใช่ string ธรรมดา
  • ชั้นใน { color: 'red' }: คือ JavaScript object ที่ใช้แทน CSS

🔁 เปรียบเทียบกับ HTML ปกติ
ใน HTML ปกติ:

<div style="color: red;">Hello</div>
Enter fullscreen mode Exit fullscreen mode

style คือ string

แต่ใน React JSX เราไม่ใช้ string — เราใช้ object แทน เพราะ React ต้องการให้ style ถูกจัดการเป็น JavaScript object

✅ ตัวอย่างเพิ่มเติม

const myStyle = {
  backgroundColor: 'blue',
  fontSize: '20px'
};

function MyComponent() {
  return <div style={myStyle}>Styled div</div>;
}
Enter fullscreen mode Exit fullscreen mode

หรือแบบ inline:

<div style={{ backgroundColor: 'yellow', padding: '10px' }}>Nice!</div>
Enter fullscreen mode Exit fullscreen mode

🚫 ถ้าใช้ { ครั้งเดียวจะเกิดอะไร?
ถ้าเขียนแบบนี้:

<div style={ color: 'red' }>Hello</div> // ❌ Error!
Enter fullscreen mode Exit fullscreen mode

จะได้ error เพราะ React จะไม่เข้าใจว่า color: 'red' คืออะไร — ต้องห่อมันใน object ก่อน

Syntax ความหมาย
{ ... } JSX expression (JS code)
{ key: value } JavaScript object (CSS แบบ object)

ดังนั้น style={{ color: 'red' }} → ชั้นนอกคือ JSX expression, ชั้นในคือ CSS object ครับ

Top comments (0)