事件觸發
之前我們寫到的on_click正是一種事件觸發，現在快速的看一下加上async版本。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import asyncio
class AsyncState(rx.State):
count: int = 0
async def number_update(self) -> int:
for i in range(10):
await asyncio.sleep(0.5)
self.count += 1
yield
def index():
return rx.center(
rx.vstack(
rx.heading(AsyncState.count),
rx.button(
'點我',
on_click = AsyncState.number_update,
style = {
"color_scheme" : 'twitter'
}
)
)
)
|
我們這邊使用了yield，在每次狀態更新的時候送往前端，這之中就包含事件的變更。
順帶一提，甚麼是yield？
yield通常是為了節省記憶體使用，如果一次遇到大量(如爬蟲)資料進入list內，會不會炸？(會不會我不知道，反正炸了剛好再買一台電腦)
答案是有可能…不過yield的設計目的就是為了單次輸出內容，yield並不是return，不會直接回傳，而是會繼續運行。
看上面的範例，打開頁面可以看見數字的變動。
子狀態
子狀態可以繼承其他子狀態。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| class Father(rx.State):
nums1: int = 0
class son1(Father):
nums2: str = '1'
class son2(Father):
color: str = 'green'
class son3(son1):
text: str = '咕啦？'
def index():
return rx.center(
rx.text(
son3.text,
color = son2.color
)
)
|
反正就是一般的繼承，不用想太複雜。
存取父狀態屬性
我們可以從子屬性更改父屬性，可無法從父屬性更改子屬性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
class son3(son1):
text: str = '咕啦？'
def index():
son3.num1 = 3
return rx.center(
rx.text(
son3.nums1,
color = son2.color
)
)
|
出來結果一樣是0，由此可知無法更改。
State utility methods
- get_client_ip()：返回目前使用者的IP。
- get_current_page()：傳回目前頁面的URL。
- get_cookies()：傳回目前使用者的瀏覽器cookie。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
class State(rx.State):
@rx.var
def client_ip(self):
return self.get_client_ip()
@rx.var
def current_page(self):
return self.get_current_page()
@rx.var
def cookies(self):
return str(self.get_cookies())
def index():
return rx.vstack(
rx.text(State.client_ip),
rx.text(State.current_page),
rx.text(State.cookies),
)
app = rx.App()
app.add_page(index)
|
實際運行結果
state.py