ReflexKR

コンポーネント工房：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"を一緒に渡すと、1行から始まって伸びていきます。大きくなりすぎないようにするには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]でサーバーがもう一度制限します。保存するときは、デバウンスでまだ State に届いていない文字が残らないようform_dataの値を使います。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