getTextareaProps

テキストエリア要素をアクセシブルにするために必要なすべてのプロパティを返すヘルパーです。

1const props = getTextareaProps(meta, options);

#例

1import { useForm, getTextareaProps } from '@conform-to/react';
2
3function Example() {
4  const [form, fields] = useForm();
5
6  return <textarea {...getTextareaProps(fields.content)} />;
7}

#オプション

`value`

このヘルパーは、例えばコントロールされた入力など、これが false に設定されていない限り、 defaultValue を返します。

`ariaAttributes`

結果のプロパティに aria-invalid と aria-describedby を含めるかどうかを決定します。デフォルトは true です。

`ariaInvalid`

ARIA 属性を meta.errors または meta.allErrors に基づいて設定するかどうかを決定します。デフォルトは errors です。

`ariaDescribedBy`

aria-describedby 属性に追加の id を付加します。フィールドメタデータから meta.descriptionId を渡すことができます。

#Tips

ヘルパーは任意です。

このヘルパーは、定型文を減らし、読みやすくするための便利な機能です。テキストエリア要素のプロパティを設定するために、いつでもフィールドメタデータを直接使用することができます。

1// Before
2function Example() {
3  return (
4    <form>
5      <textarea
6        key={fields.content.key}
7        id={fields.content.id}
8        name={fields.content.name}
9        form={fields.content.formId}
10        defaultValue={fields.content.initialValue}
11        aria-invalid={!fields.content.valid || undefined}
12        aria-describedby={
13          !fields.content.valid ? fields.content.errorId : undefined
14        }
15        required={fields.content.required}
16        minLength={fields.content.minLength}
17        maxLength={fields.content.maxLength}
18      />
19    </form>
20  );
21}
22
23// After
24function Example() {
25  return (
26    <form>
27      <textarea {...getTextareaProps(fields.content)} />
28    </form>
29  );
30}

自分のヘルパーを作る

ヘルパーはネイティブのフォーム要素のために設計されています。カスタムコンポーネントを使う必要がある場合、いつでも独自のヘルパーを作ることができます。