You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/thinking-in-react.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -194,7 +194,7 @@ td {
194
194
195
195
</Sandpack>
196
196
197
-
(Ikiwa code hii inaonekana ya kuudhi, pitia [Anza Haraka](/learn/) kwanza!)
197
+
(Ikiwa msimbo huu unaonekana wa kuudhi, pitia [Anza Haraka](/learn/) kwanza!)
198
198
199
199
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.
200
200
@@ -387,7 +387,7 @@ function SearchBar({ filterText, inStockOnly }) {
387
387
<form>
388
388
<input
389
389
type="text"
390
-
thamani={filterText}
390
+
value={filterText}
391
391
placeholder="Search..."/>
392
392
<label>
393
393
<input
@@ -437,7 +437,7 @@ Kumbuka kwamba kuhariri fomu bado haifanyi kazi. Kuna hitilafu ya kiweko kwenye
437
437
438
438
<ConsoleBlock level="error">
439
439
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.
441
441
442
442
</ConsoleBlock>
443
443
@@ -449,7 +449,7 @@ function SearchBar({ filterText, inStockOnly }) {
449
449
<form>
450
450
<input
451
451
type="text"
452
-
thamani={filterText}
452
+
value={filterText}
453
453
placeholder="Search..."/>
454
454
```
455
455
@@ -461,7 +461,7 @@ You want to make it so whenever the user changes the form inputs, the state upda
461
461
462
462
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`.
463
463
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.
465
465
466
466
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`:
467
467
@@ -484,9 +484,9 @@ Ndani ya `SearchBar`, utaongeza vidhibiti vya tukio vya `onChange` na kuweka hal
0 commit comments