React හි ප්රතික්රියාශීලී අරාව ක්රියා
දැන් අරාවක අංග සමඟ ප්රතික්රියාශීලීව
ක්රියා කරන ආකාරය ඉගෙන ගනිමු.
මෙය සිදු කිරීම සඳහා, අපි සෑම li
ටැගයකටම අනුරූප අරාවෙහි එහි අනුක්රමණය
පරාමිතියක් ලෙස යොමු කරන ඉසව්වක
සැකසුම්කරුවෙකු යොදමු:
function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
const result = notes.map((note, index) => {
return <li key={index} onClick={() => doSmth(index)}>
{note}
</li>;
});
return <div>
<ul>
{result}
</ul>
</div>;
}
අපගේ ශ්රිතය තුළ, අපට අපගේ අරාවේ අංගයක් සමඟ ඕනෑම ක්රියාවක් සිදු කළ හැකිය:
function App() {
...
function doSmth(index) {
let copy = Object.assign([], notes);
copy[index] += '!'; // අංගය සමඟ යමක් කරන්න
setNotes(copy);
}
}
සංඛ්යා සහිත අරාවක් ලබා දී ඇත. එය
ul ලැයිස්තුවක් ලෙස පෙන්වන්න.
ඕනෑම li එකක් මත ක්ලික් කිරීමෙන්
එහි අංකය වර්ග කරන්න.
සෑම li අවසානයකම බොත්තමක් සාදන්න,
එය එබීමෙන් එම li ලැයිස්තුවෙන්
මකා දමනු ඇත.
ආදාන ක්ෂේත්රයක් ලබා දී ඇත. ඕනෑම li
එකක් මත ක්ලික් කිරීමෙන්, එම li
හි ලියැවිල්ල ආදාන ක්ෂේත්රයට යාම සිදු කරන්න.
පෙර ගැටළුව වෙනස් කරන්න එවිට
ආදාන ක්ෂේත්රය අවධානය අහිමි වූ විට වෙනස් කළ
ලියැවිල්ල අනුරූප li වෙත ලබා දේ.
බොත්තමක් ලබා දී ඇත. මෙම බොත්තම මත ක්ලික් කිරීමෙන්
li අනුපිළිවෙල ප්රතිවිරුද්ධ දිශාවට හරවන්න.
