ReflexKR

Reflex 官方文档

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

表单

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

数据展示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

展开与切换

Tabs

Accordion

Segmented Control

浮层

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

动态渲染

Cond

Match

Foreach

Auto Scroll

媒体

Image

Audio

Video

表格与数据网格

Table

Data Table

Data Editor

图表

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

图表部件

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

其他图表库

Plotly

Pyplot

HTML 元素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

其他工具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

组件工坊：Reflex 组件库 100 例

表单

Input

rx.inputrx.input.slot

官方文档

工坊订单

请做一个订阅新闻通讯的输入框。只收一行邮箱地址，格式不对就不能提交。

rx.input 是单行文本输入框，用来收集搜索词、姓名、邮箱、密码这类简短的值。需要多行时请用 Text Area。

rx.input(placeholder="Search the docs")

试着改属性

改动 type，同一个输入框就会变成密码框、日期选择器或颜色选择器。其余属性决定外观。

试着改属性

placeholder

type

variant

size

color

radius

disabled

read_only

rx.input(placeholder="Search the docs", type="text", variant="surface", size="2", color_scheme="indigo", radius="medium", disabled=False, read_only=False)

variant 有 classic · surface · soft 三种。read_only 只显示值，disabled 会变灰并且无法获得焦点。

属性	取值	默认值	用途
`placeholder`	字符串	无	为空时以浅色显示的提示文字
`type`	`"text"` `"password"` `"email"` `"number"` `"date"` …	`"text"`	输入类型，与 HTML `<input type>` 相同
`value` / `default_value`	字符串·数字	无	受控的值 / 只在开始时填入一次的值
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	外观
`size`	`"1"` ~ `"3"`	`"2"`	高度与字号
`color_scheme`, `radius`	Radix 颜色名 / `"none"` ~ `"full"`	主题值	强调色与圆角
`name`, `required`	字符串 / `True`	无	表单提交时用的名字；为空时阻止提交
`max_length`, `min_length`, `pattern`	数字 / 正则表达式	无	由浏览器检查的字数与格式
`min`, `max`, `step`	数字	无	`type="number"`·`"date"` 等的范围与步长
`disabled`, `read_only`, `auto_focus`	`True` / `False`	`False`	禁用、只读、页面打开后立即获得焦点
`auto_complete`	`True` / `False`	浏览器默认	浏览器自动补全。官方文档也写了 `"off"` 这类字符串，但 0.10 只接受 bool
`on_change`	事件		值变化时触发，传入新值（字符串）
`on_blur`, `on_focus`	事件		失去 / 获得焦点时触发。`on_blur` 也会传入值
`on_key_down`, `on_key_up`	事件		按下 / 松开按键时触发，传入键名

on_blur：写完离开时触发一次

焦点离开输入框时，on_blur 会被调用一次。点击框外或按 Tab 切走时，当时的值会送到 State。适合不需要每敲一个字就请求服务器的场景。

Hello World!

class InputBlurState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputBlurState.text, size="5"),
    rx.input(placeholder="Type, then click outside", on_blur=InputBlurState.set_text),
)

受控输入：value + on_change

把 State 的值交给 value，再用 on_change 更新这个值，输入框的内容就始终与 State 一致。这叫受控（controlled）输入。服务器端改了值，输入框也会跟着变。

rx.input 同时收到 value 和 on_change 时，会在内部用防抖输入（DebounceInput）包一层。打字时内容立即显示在屏幕上，停顿片刻（默认 300ms）后才向服务器发送一次。所以即使值由 State 掌管，输入也不会卡顿。

Hello World!

class InputControlledState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputControlledState.text, size="5"),
    rx.input(
        placeholder="Type here",
        value=InputControlledState.text,
        on_change=InputControlledState.set_text,
    ),
)

不给 value、只用 on_change 或 on_blur 的是非受控（uncontrolled）输入。初始值用 default_value 填入，之后由浏览器保管值。

插槽：附加图标和文字

把 rx.input.slot 作为子元素放进去，输入框内侧就会附上图标或简短文字。side="right" 则附在右侧。插槽也可以单独接收 color_scheme。

@example.com

rx.vstack(
    rx.input(
        rx.input.slot(rx.icon("search", size=16)),
        placeholder="Search the docs",
    ),
    rx.input(
        rx.input.slot(rx.icon("at-sign", size=16)),
        rx.input.slot(rx.text("@example.com", size="1"), side="right"),
        placeholder="username",
    ),
)

输入类型（type）

type 接受与 HTML <input type> 相同的值。有 "text"（默认）、"password"、"email"、"number"、"date"、"time"、"url"、"color" 等，浏览器会显示相应的输入工具。完整列表见 MDN 的 input 文档。

rx.vstack(
    rx.input(placeholder="Username", type="text"),
    rx.input(placeholder="Password", type="password"),
    rx.input(placeholder="Email", type="email"),
    rx.input(type="number", min=0, max=10, step=1, default_value="3"),
    rx.input(type="date"),
    rx.input(type="color", default_value="#3e63dd", width="80px"),
)

通过表单提交

表单里的输入必须有 name，才会以 名字: 值 的形式进入提交数据。required=True 时，浏览器会在为空时阻止提交。pattern 和 max_length 也会在提交前由浏览器检查。下面第二个框只接受三位数字。

Results:

{}

class InputFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.hstack(
                rx.input(name="username", placeholder="Username", required=True),
                rx.input(name="code", placeholder="3 digits", pattern="[0-9]{3}", max_length=3),
                rx.button("Submit", type="submit"),
            ),
            on_submit=InputFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(InputFormState.form_data.to_string())),
    ),
)

表单本身在 Form 页面详细介绍。

不用 State 改值：rx.set_value

rx.set_value("id", 值) 会直接修改 id 所指输入框的值。想清空或填入输入框又不想新建 State 变量时使用。

rx.hstack(
    rx.input(id="input_erase_demo", default_value="Erase me"),
    rx.button("Erase", on_click=rx.set_value("input_erase_demo", "")),
    rx.button("Fill", on_click=rx.set_value("input_erase_demo", "Hello"), variant="soft"),
)

键盘事件

每按一次键，on_key_down 就会传入键名（"Enter"、"a" …）。如果想按 Enter 执行某个操作，通常把输入框放进表单更简单。

Last key: -

class InputKeyState(rx.State):
    last_key: str = "-"

    @rx.event
    def on_key(self, key: str):
        self.last_key = key


rx.vstack(
    rx.input(placeholder="Press any key", on_key_down=InputKeyState.on_key),
    rx.text("Last key: ", rx.code(InputKeyState.last_key)),
)

完成订单

type="email" 和 required=True 让浏览器先检查格式，表单同时处理 Enter 和按钮提交。收到的地址只显示最近三个。

class InputNewsletterState(rx.State):
    emails: list[str] = []

    @rx.event
    def subscribe(self, form_data: dict):
        email = form_data.get("email", "").strip()
        if email and email not in self.emails:
            self.emails = (self.emails + [email])[-3:]


rx.vstack(
    rx.form(
        rx.hstack(
            rx.input(
                rx.input.slot(rx.icon("mail", size=16)),
                name="email",
                type="email",
                placeholder="you@example.com",
                required=True,
                flex="1",
            ),
            rx.button("Subscribe", type="submit"),
            width="100%",
        ),
        on_submit=InputNewsletterState.subscribe,
        reset_on_submit=True,
        width="100%",
    ),
    rx.foreach(InputNewsletterState.emails, lambda e: rx.badge(e, variant="soft")),
    width="100%",
    max_width="420px",
)

工坊笔记

用 rx.input(placeholder=...) 创建，用 type 选择输入类型。
on_blur 在写完离开时触发一次；value + on_change 是受控输入（自动防抖）。
图标用 rx.input.slot，放右侧用 side="right"。
在表单中 name 就是键，required · pattern · max_length 由浏览器检查。
不用 State 改值时用 rx.set_value("id", 值)。

← 上一课

表单 · Button

下一课 →

表单 · Text Area

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex