Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

getTextareaProps.md translated to Japanese. #21

Merged
merged 1 commit into from
Mar 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions docs/ja/api/react/getTextareaProps.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# getTextareaProps

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

```tsx
const props = getTextareaProps(meta, options);
```

## 例

```tsx
import { useForm, getTextareaProps } from '@conform-to/react';

function Example() {
const [form, fields] = useForm();

return <textarea {...getTextareaProps(fields.content)} />;
}
```

## Options

### `value`

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

### `ariaAttributes`

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

### `ariaInvalid`

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

### `ariaDescribedBy`

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

## Tips

### ヘルパーは任意です。

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

```tsx
// Before
function Example() {
return (
<form>
<textarea
key={fields.content.key}
id={fields.content.id}
name={fields.content.name}
form={fields.content.formId}
defaultValue={fields.content.initialValue}
aria-invalid={!fields.content.valid || undefined}
aria-describedby={
!fields.content.valid ? fields.content.errorId : undefined
}
required={fields.content.required}
minLength={fields.content.minLength}
maxLength={fields.content.maxLength}
/>
</form>
);
}

// After
function Example() {
return (
<form>
<textarea {...getTextareaProps(fields.content)} />
</form>
);
}
```

### 自分のヘルパーを作る

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