Skip to content

Commit 1c37718

Browse files
oyondeoyonde
authored andcommitted
resolved mistakes in the earlier commit
1 parent 15c7ec7 commit 1c37718

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

src/content/learn/thinking-in-react.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ td {
194194

195195
</Sandpack>
196196

197-
(Ikiwa code hii inaonekana ya kuudhi, pitia [Anza Haraka](/learn/) kwanza!)
197+
(Ikiwa msimbo huu unaonekana wa kuudhi, pitia [Anza Haraka](/learn/) kwanza!)
198198

199199
Baada ya kuunda vijenzi vyako, utakuwa na maktaba ya vijenzi vinavyoweza kutumika tena vinavyotoa kielelezo chako cha data. Kwa sababu hii ni programu tuli, vijenzi vitarejesha JSX pekee. Kijenzi kilicho juu ya daraja (`FilterableProductTable`) kitachukua kielelezo chako wa data kama mhimili. Hii inaitwa _one-way data flow_ kwa sababu data hutiririka kutoka kijenzi cha kiwango cha juu hadi kile kilicho chini ya mti.
200200

@@ -387,7 +387,7 @@ function SearchBar({ filterText, inStockOnly }) {
387387
<form>
388388
<input
389389
type="text"
390-
thamani={filterText}
390+
value={filterText}
391391
placeholder="Search..."/>
392392
<label>
393393
<input
@@ -437,7 +437,7 @@ Kumbuka kwamba kuhariri fomu bado haifanyi kazi. Kuna hitilafu ya kiweko kwenye
437437
438438
<ConsoleBlock level="error">
439439
440-
Umepeana kiunga cha \`thamani\` cha uga wa fomu bila kidhibiti cha \`onChange\`. Hii itatoa uga wa kusoma pekee.
440+
Umepeana kiunga cha \`value\` cha uga wa fomu bila kidhibiti cha \`onChange\`. Hii itatoa uga wa kusoma pekee.
441441
442442
</ConsoleBlock>
443443
@@ -449,7 +449,7 @@ function SearchBar({ filterText, inStockOnly }) {
449449
<form>
450450
<input
451451
type="text"
452-
thamani={filterText}
452+
value={filterText}
453453
placeholder="Search..."/>
454454
```
455455
@@ -461,7 +461,7 @@ You want to make it so whenever the user changes the form inputs, the state upda
461461
462462
Kwa sasa programu yako inatekelezwa kwa njia ipasavyo ikiwa na viunga na hali inayotiririka chini ya daraja. Lakini ili kubadilisha hali kulingana na ingizo la mtumiaji, utahitaji kuauni data inayotiririka kwa njia nyingine: vijenzi vya fomu vilivyo ndani kabisa ya daraja vinahitaji kusasisha hali katika `FilterableProductTable`.
463463
464-
React hufanya mtiririko huu wa data kuwa wazi, lakini unahitaji kuandika zaidi kuliko kuunganisha data kwa njia mbili. Ukijaribu kuandika au kuteua kisanduku katika mfano ulio hapo juu, utaona kuwa React inapuuza ingizo lako. Hii ni makusudi. Kwa kuandika `<input thamani={filterText} />`, umeweka `thamani` mhimili wa `input` kuwa sawa na `filterText` hali iliyopitishwa kutoka `FilterableProductTable`. Kwa kuwa hali ya `kichujio` haijawekwa kamwe, ingizo halibadiliki.
464+
React hufanya mtiririko huu wa data kuwa wazi, lakini unahitaji kuandika zaidi kuliko kuunganisha data kwa njia mbili. Ukijaribu kuandika au kuteua kisanduku katika mfano ulio hapo juu, utaona kuwa React inapuuza ingizo lako. Hii ni makusudi. Kwa kuandika `<input value={filterText} />`, umeweka `value` mhimili wa `input` kuwa sawa na `filterText` hali iliyopitishwa kutoka `FilterableProductTable`. Kwa kuwa hali ya `filterText` haijawekwa kamwe, ingizo halibadiliki.
465465
466466
Unataka kuifanya iwe hivyo wakati wowote mtumiaji anapobadilisha ingizo za fomu, hali husasisha ili kuonyesha mabadiliko hayo. Hali hiyo inamilikiwa na `FilterableProductTable`, kwa hivyo inaweza tu kuita `setFilterText` na `setInStockOnly`. Ili kuruhusu `SearchBar` kusasisha hali ya `FilterableProductTable`, unahitaji kupitisha vitendaji hivi hadi kwa `SearchBar`:
467467
@@ -484,9 +484,9 @@ Ndani ya `SearchBar`, utaongeza vidhibiti vya tukio vya `onChange` na kuweka hal
484484
```js {5}
485485
<input
486486
type="text"
487-
thamani={filterText}
487+
value={filterText}
488488
placeholder="Search..."
489-
onChange={(e) => onFilterTextChange(e.target.thamani)} />
489+
onChange={(e) => onFilterTextChange(e.target.value)} />
490490
```
491491
492492
Sasa programu inafanya kazi kikamilifu!
@@ -592,8 +592,8 @@ function SearchBar({
592592
<form>
593593
<input
594594
type="text"
595-
thamani={filterText} placeholder="Search..."
596-
onChange={(e) => onFilterTextChange(e.target.thamani)} />
595+
value={filterText} placeholder="Search..."
596+
onChange={(e) => onFilterTextChange(e.target.value)} />
597597
<label>
598598
<input
599599
type="checkbox"

0 commit comments

Comments
 (0)