export const CheckBox: React.FC<CheckBoxProps> = ({ name, value, checked, error, }: CheckBoxProps) => { // [参照] https://react-hook-form.com/jp/api/#register // (1) register: このメソッドを使用すると、input/select の Ref とバリデーションルールを // React Hook Form に登録 (register) することができます。 // (2) watch: これは指定された input/inputs を監視し、その値を返します。 // defaultValue が定義されていない場合、watch の初回のレンダリングは // register の前に呼び出されるため undefined を返しますが、 // 第2引数として defaultValue を設定して値を返すことができます。 // (3) getValues: この関数は、フォームの値を読み取るのに役立ちます。 // watchの間はgetValuesはトリガーされません // 入力の変更を再レンダリングまたはサブスクライブします。機能は次のとおりです。 const { register, getValues, watch } = useFormContext() const { error: contextError } = React.useContext(CheckBoxGroupContext) // 省略 return ( <> {/* https://qiita.com/HikaruSasaki/items/36032eb90f28c1e59d0b */} {/* [1] <input type="checkbox">自体を非表示にします。 */} {/* [2] 非表示にしてもチェック出来るようにする為、<input type="checkbox">を<label>タグで囲います。 */} {/* [3] チェックボックスを表示させる為、<input type="checkbox">の後ろに<span>要素を入れます。 */} {/* [4] チェックボックスが、チェックされてる時、されてない時に応じて<span>のbefore擬似要素に対して、任意のスタイルを指定してあげます。 */} {/* https://kredo.jp/media/css-symbol-meaning/ */} {/* 「+」は、指定した要素に隣接する要素にスタイルを適用します。 */} {/* 「>」と似ていますが、子要素ではなく「隣接する要素」にのみ適用します。 */} {/* https://github.com/react-hook-form/react-hook-form/tree/master/examples */} {/* https://codesandbox.io/s/checkbox-min-checked-forked-0tkjz?file=/src/App.js:378-618 */}
https://www.tutorialspoint.com/es6/es6_array_method_join.htm
className={checkbox.join(' ')}