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 例

表单

Text Area

rx.text_area

官方文档

工坊订单

请在订单详情页加一个写评价的输入框。最多 200 字，要显示剩余字数，还要能按 Enter 直接发布。

rx.text_area 是多行文本输入框，用于评论、咨询内容、备忘这类可能包含换行的文字。用法与 rx.input 几乎相同，另外多了行数（rows）、尺寸调整（resize）和自动高度（auto_height）。

rx.text_area(placeholder="Type here...")

试着改属性

打开 auto_height 后写几行试试，输入框会随文字变高。resize 决定用户能用右下角手柄往哪个方向调整大小。

试着改属性

placeholder

rows

resize

variant

size

color

radius

auto_height

disabled

rx.text_area(placeholder="Write a comment...", rows="3", resize="vertical", variant="surface", size="2", color_scheme="indigo", radius="medium", auto_height=False, disabled=False)

rows 是初始显示的行数，resize 是用户可以拉伸的方向。variant · size · radius 与 Input 相同。

属性	取值	默认值	用途
`placeholder`	字符串	无	为空时显示的提示文字
`value` / `default_value`	字符串	无	受控的值 / 只在开始时填入一次的值
`rows`, `cols`	数字字符串	浏览器默认	初始显示的行数、每行字符宽度
`resize`	`"none"` `"vertical"` `"horizontal"` `"both"`	主题值	用户可以调整大小的方向
`auto_height`	`True` / `False`	`False`	随文字长度增高（配合 `min_height`）
`enter_key_submit`	`True` / `False` / Var	`False`	Enter 提交表单，Shift+Enter 换行
`variant`, `size`, `color_scheme`, `radius`	与 Input 相同		外观
`name`, `required`, `max_length`, `min_length`		无	表单提交名与浏览器检查
`disabled`, `read_only`, `auto_focus`	`True` / `False`	`False`	禁用、只读、自动获得焦点
`on_change`, `on_blur`	事件		值变化时 / 失去焦点时触发，传入值
`on_key_down`, `on_key_up`	事件		按下 / 松开按键时触发

基础：用 on_blur 取值

和 Input 一样，on_blur 会在离开输入框时把写好的内容传一次。同时给 value 和 on_change 就成了受控输入，这时也会自动加上防抖。

Hello World!

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

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


rx.vstack(
    rx.heading(TextAreaBlurState.text, size="4"),
    rx.text_area(placeholder="Type, then click outside", on_blur=TextAreaBlurState.set_text),
    width="100%",
)

在表单中

在表单数据里，name 就是键。下面是官方文档里的反馈表单。输入框通过 value + on_change 由 State 掌管，发送后用 rx.cond 换成感谢卡片。因为 required=True，空内容无法发送。

class TextAreaFeedbackState(rx.State):
    feedback: str = ""
    submitted: bool = False

    @rx.event
    def set_feedback(self, value: str):
        self.feedback = value

    @rx.event
    def submit_feedback(self, form_data: dict):
        self.submitted = True

    @rx.event
    def reset_form(self):
        self.feedback = ""
        self.submitted = False


rx.cond(
    TextAreaFeedbackState.submitted,
    rx.card(
        rx.vstack(
            rx.text("Thank you! You wrote:"),
            rx.blockquote(TextAreaFeedbackState.feedback),
            rx.button("Submit another response", on_click=TextAreaFeedbackState.reset_form),
        ),
    ),
    rx.card(
        rx.form(
            rx.flex(
                rx.text("Are you enjoying Reflex?"),
                rx.text_area(
                    name="feedback",
                    placeholder="Write your feedback...",
                    value=TextAreaFeedbackState.feedback,
                    on_change=TextAreaFeedbackState.set_feedback,
                    resize="vertical",
                    required=True,
                ),
                rx.button("Send", type="submit"),
                direction="column",
                spacing="3",
            ),
            on_submit=TextAreaFeedbackState.submit_feedback,
        ),
    ),
)

按 Enter 提交

在多行输入框里，Enter 本来是换行。enter_key_submit=True 时，Enter 会提交外层的表单，Shift+Enter 才是换行。这个属性也接受 Var，所以可以像下面这样用开关来切换。想在处理中关闭它，可以写成 enter_key_submit=~State.is_loading。

enter_key_submit 使用自己的按键处理器，所以不能和 on_key_down 同时使用（同时给会抛出 ValueError）。Python 的 on_key_down 处理器只拿得到键名，也没法阻止换行。两者都需要时，得靠 rx.call_script 之类的浏览器端处理。

Enter submits

Nothing submitted yet.

class TextAreaEnterState(rx.State):
    submitted_text: str = ""
    enter_submits: bool = True

    @rx.event
    def handle_submit(self, form_data: dict):
        self.submitted_text = form_data.get("message", "")

    @rx.event
    def set_enter_submits(self, value: bool):
        self.enter_submits = value


rx.vstack(
    rx.hstack(
        rx.switch(checked=TextAreaEnterState.enter_submits, on_change=TextAreaEnterState.set_enter_submits),
        rx.text("Enter submits", size="2"),
        align="center",
    ),
    rx.form(
        rx.text_area(
            name="message",
            placeholder="Type and press Enter (Shift+Enter for a new line)",
            enter_key_submit=TextAreaEnterState.enter_submits,
        ),
        on_submit=TextAreaEnterState.handle_submit,
        reset_on_submit=True,
        width="100%",
    ),
    rx.cond(
        TextAreaEnterState.submitted_text != "",
        rx.text("Submitted: ", rx.code(TextAreaEnterState.submitted_text)),
        rx.text("Nothing submitted yet.", color_scheme="gray"),
    ),
    width="100%",
)

自动高度

auto_height=True 时，输入框不会在内部滚动，而是随文字变大。同时给 rows="1" 和 min_height="0"，就会从一行开始增高。不想让它无限变大，就给 max_height。下面到 160px 就停住。

rx.text_area(
    placeholder="Type a few lines - the box grows to fit",
    auto_height=True,
    rows="1",
    min_height="0",
    max_height="160px",
    width="100%",
)

完成订单

用 value + on_change 让 State 掌管文字，用计算变量 left 显示剩余字数。max_length 由浏览器、[:200] 由服务器再挡一次长度。保存时使用 form_data 里的值，避免还有因防抖而没送到 State 的字。auto_height 让它随内容增高，enter_key_submit 让按 Enter 就能发布。

class TextAreaReviewState(rx.State):
    review: str = ""
    saved: str = ""

    @rx.event
    def set_review(self, value: str):
        self.review = value[:200]

    @rx.event
    def save(self, form_data: dict):
        self.saved = form_data.get("review", "")[:200]
        self.review = ""

    @rx.var
    def left(self) -> int:
        return 200 - len(self.review)


rx.form(
    rx.vstack(
        rx.text_area(
            name="review",
            placeholder="How was your order?",
            value=TextAreaReviewState.review,
            on_change=TextAreaReviewState.set_review,
            max_length=200,
            auto_height=True,
            rows="2",
            min_height="0",
            enter_key_submit=True,
            width="100%",
        ),
        rx.hstack(
            rx.text(TextAreaReviewState.left, " characters left", size="1", color_scheme="gray"),
            rx.spacer(),
            rx.button("Post review", type="submit", disabled=TextAreaReviewState.review == ""),
            width="100%",
            align="center",
        ),
        rx.cond(TextAreaReviewState.saved != "", rx.callout(TextAreaReviewState.saved, icon="message-square")),
        width="100%",
    ),
    on_submit=TextAreaReviewState.save,
    width="100%",
    max_width="460px",
)

工坊笔记

rx.text_area 是多行输入，用法与 rx.input 相同（on_blur、value + on_change）。
用 rows 定初始行数，用 resize 定用户可拉伸的方向。
auto_height=True + rows="1" + min_height="0" 会随文字变大，上限用 max_height。
enter_key_submit=True 时 Enter 提交表单、Shift+Enter 换行，不能与 on_key_down 同时使用。
在表单中 name 是键，required · max_length 由浏览器检查。

← 上一课

表单 · Input

下一课 →

表单 · Checkbox

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex