useInputControl

ブラウザイベントの発火を制御できる React フックです。Conform にカスタム input を組み込みたい場合に便利です。

1const control = useInputControl(metaOrOptions);

#例

1import { useForm, useInputControl } from '@conform-to/react';
2import { Select, Option } from './custom-ui';
3
4function Example() {
5  const [form, fields] = useForm();
6  const color = useInputControl(fields.color);
7
8  return (
9    <Select
10      name={fields.color.name}
11      value={color.value}
12      onChange={color.change}
13      onFocus={color.focus}
14      onBlur={color.blur}
15    >
16      <Option value="red">Red</Option>
17      <Option value="green">Green</Option>
18      <Option value="blue">Blue</Option>
19    </Select>
20  );
21}

#パラメータ

`metaOrOptions`

フィールドメタデータ、または key 、 name 、 formId 、 initialValue を含むオプションオブジェクトです。

#戻り値

input コントロールです。これにより、入力値と 3 種類のイベントディスパッチャーの両方にアクセスできます。

`value`

input の値です。これを使用して、制御された input を設定することができます。

`change(value: string)`

値を変更する必要があるときに呼び出されるメソッドです。これにより、新しい値を持つ入力の代わりに change イベントと input イベントの両方がディスパッチされます。

`blur()`

ユーザーが input から離れたときに呼び出されるメソッドです。これにより、入力の代わりに blur イベントと focusout イベントの両方がディスパッチされます。

`focus()`

このメソッドは、 input にフォーカスが当たったときに呼び出されます。これにより、入力の代わりに focus イベントと focusin イベントの両方がディスパッチされます。

#Tips

フォーカス移譲

送信に失敗した場合、Conform は最初の無効な input 要素にフォーカスします。しかし、カスタム input を使用している場合、これは機能しないかもしれません。これを修正するには、フォーカスイベントをリスニングして、希望する要素に対して element.focus() をトリガーすることで、input 要素からフォーカスを転送できます。

1import { useForm, useInputControl } from '@conform-to/react';
2import { Select, Option } from './custom-ui';
3
4function Example() {
5  const [form, fields] = useForm();
6  const inputRef = useRef(null);
7  const color = useInputControl(fields.color);
8
9  return (
10    <>
11        <input
12            name={fields.color.name}
13            defaultValue={fields.color.initialValue}
14            className="sr-only"
15            tabIndex={-1}
16            onFocus={() => inputRef.current?.focus()}
17        />
18        <Select
19            ref={inputRef}
20            value={color.value}
21            onChange={color.change}
22            onFocus={color.focus}
23            onBlur={color.blur}
24        >
25            <Option value="red">Red</Option>
26            <Option value="green">Green</Option>
27            <Option value="blue">Blue</Option>
28        </Select>
29    <>
30  );
31}

上記の例では、カスタム入力によってレンダリングされる内部の入力を制御できないため、カスタムセレクトコンポーネントに name プロパティを渡す代わりに、手動で非表示の入力を設定しています。入力は視覚的には隠されていますが、 tailwindcss からの sr-only クラスのおかげで依然としてフォーカス可能です。入力がフォーカスされたとき、 inputRef.current?.focus() を呼び出してカスタム入力へフォーカスを委譲します。

もし tailwindcss を使用していない場合は、好みのスタイリングソリューションから同様のユーティリティを探すか、または以下のスタイルを適用して sr-only クラスの実装に基づいた対応を行うことができます:

1const style = {
2  position: 'absolute',
3  width: '1px',
4  height: '1px',
5  padding: 0,
6  margin: '-1px',
7  overflow: 'hidden',
8  clip: 'rect(0,0,0,0)',
9  whiteSpace: 'nowrap',
10  border: 0,
11};