Дар React бо клик кардани тугма маълумоти формро кор кардан
Дар дарси гузашта мо чунин кор мекардем, ки ҳар гоҳ аломате ба вуруд (input) ворид карда мешуд, дар абзас дар ҳол натиҷа пайдо мешуд. Албатта, ин зебо менамояд, вале нуқси онро дорад.
Биёед тасаввур кунем, ки мо бояд амалиёти баъзан "вазнин", сарфаи заҳматангезро анҷом диҳем. Муносиб нест, ки онро барои ҳар як аломати воридшаванда анҷом диҳем - беҳтар аст, ки интизори ворид кардани ниҳоии маълумот бошем ва сипас амалиёти заруриро як маротиба анҷом диҳем ва натиҷаро дар абзас чоп кунем.
Барои ин мо бояд тугмаро ворид кунем, ки бо клик кардан бар он амалиёти сарфаи заҳматангези мо анҷом дода мешавад. Дар ин ҳолат боз ҳар як вуруд (input) ба ҳол (state)-и худ мувофиқат мекунад, плюс як ҳоли дигар ба мо лозим аст, барои сабти натиҷаи амалиёт ва намоиши он дар экран.
Биёед бар рӯи мисол назар кунем. Бигзор мо ду вуруд (input) ва як тугма дошта бошем. Бо клик кардан бар тугма биёед ҷамъи рақамҳоеро, ки ба вурудҳо ворид шудаанд, ёбем.
Татбиқ мекунем:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
Мумкин аст аз варианти кӯтоҳшуда истифода кард:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
Ду вуруд (input), ду тугма ва як абзас дода шудааст. Бигзор ба вурудҳо рақамҳо ворид карда шаванд. Бо клик кардан бар аввалӣ тугма ҷамъи рақамҳоро ёбед, ва бо клик кардан бар тугмаи дуюмӣ - ҳосили зарб. Натиҷаро ба абзас бароварданӣ кунед.
Ду вуруд (input), як тугма ва як абзас дода шудааст. Бигзор ба вурудҳо санаҳо дар формати 2025-12-31 ворид карда шаванд. Бо клик кардан бар тугма фарқи байни санаҳоро бо рӯзҳо ёбед ва натиҷаро ба абзас бароварданӣ кунед.
Масъалаи гузаштаро тағйир диҳед, то ки ба таври пешфарз дар вурудҳо санаи ҷорӣ истода бошад.
Як вуруд (input) ва як абзас дода шудааст. Ба вуруд рақам ворид карда мешавад. Бо аз даст додани фокуса (focus) ба абзас ҷамъи рақамҳои рақами воридшударо бароварданӣ кунед.
Як вуруд (input) ва як абзас дода шудааст. Ба вуруд рақам ворид карда мешавад. Бо аз даст додани фокуса (focus) ба абзас ҳосили зарби тақсимкунандаҳои рақами воридшударо бароварданӣ кунед.
