חידת React ו ref
07/01/2022
רון הגאון החליט לכתוב תיבת טקסט בריאקט עם משתנה ref במקום state. את הקוד הבא הוא כתב בשביל להציג תיבת קלט וכפתור, ולאפשר לחיצה על הכפתור רק אם יש טקסט בתיבה:
import { useRef } from "react";
export default function App() {
const inputRef = useRef(null);
const hasText = inputRef?.current?.value !== "";
return (
<div className="App">
<h1>Write some text to enable the button</h1>
<input type="text" ref={inputRef} />
<button
disabled={!hasText}
>Go</button>
<p>hasText = {hasText}</p>
</div>
);
}
האם המנגנון עובד? אם לא - הסבירו מה באמת קורה שם, ואיך לגרום לקוד לעבוד כמו שרון רצה.