getInputProps

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

1const props = getInputProps(meta, options);

#例

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

#オプション

`type`

入力のタイプです。これは、 defaultValue （デフォルト値）または defaultChecked （デフォルトでチェックされている状態）が必要かどうかを判断するために使用されます。

`value`

これは主に、タイプが checkbox または radio の場合に入力の値を設定するために使用されます。しかし、 defaultValue や defaultChecked の状態の設定をスキップしたい場合、例えばコントロールされた入力の場合には、 false に設定することもできます。

`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      {/* text input */}
6      <input
7        key={fields.task.key}
8        id={fields.task.id}
9        name={fields.task.name}
10        form={fields.task.formId}
11        defaultValue={fields.task.initialValue}
12        aria-invalid={!fields.task.valid || undefined}
13        aria-describedby={!fields.task.valid ? fields.task.errorId : undefined}
14        required={fields.task.required}
15        minLength={fields.task.minLength}
16        maxLength={fields.task.maxLength}
17        min={fields.task.min}
18        max={fields.task.max}
19        step={fields.task.step}
20        pattern={fields.task.pattern}
21        multiple={fields.task.multiple}
22      />
23      {/* checkbox */}
24      <input
25        type="checkbox"
26        key={fields.completed.key}
27        id={fields.completed.id}
28        name={fields.completed.name}
29        form={fields.completed.formId}
30        value="yes"
31        defaultChecked={fields.completed.initialValue === 'yes'}
32        aria-invalid={!fields.completed.valid || undefined}
33        aria-describedby={
34          !fields.completed.valid ? fields.completed.errorId : undefined
35        }
36        required={fields.completed.required}
37      />
38    </form>
39  );
40}
41
42// After
43function Example() {
44  return (
45    <form>
46      {/* text input */}
47      <input {...getInputProps(fields.task, { type: 'text' })} />
48      {/* checkbox */}
49      <input
50        {...getInputProps(fields.completed, {
51          type: 'checkbox',
52          value: 'yes',
53        })}
54      />
55    </form>
56  );
57}

自分のヘルパーを作る

このヘルパーは、ネイティブの入力要素用に設計されています。カスタムコンポーネントを使用する必要がある場合は、自分自身のヘルパーを作成することができます。