Closed1

【React・Material-ui】React-Hook-Formで複数選択可能なMaterial-uiのCheckBoxボタンを実装する。

hirohiro

何について書く?

  • React-Hook-Formで複数選択可能なMaterial-uiのCheckBoxボタンを実装

内容

import { FormControl, FormControlLabel, TextField } from '@material-ui/core'
import Checkbox from '@material-ui/core/Checkbox'
import FormHelperText from '@material-ui/core/FormHelperText'
import { Controller, useForm } from 'react-hook-form'

//----------------------------
  const { register, handleSubmit, errors, reset, control } = useForm({
    mode: 'onTouched'
  })
//----------------------------

<FormControl>
            {testArray.map((data,index)=>
              <Controller
                as={
                  <FormControlLabel
                    control={<Checkbox value={data.id} />}
                    label={data.name}
                  />
                }
                control={control}
                name={`tests.${index}`}
                key={index}
                defaultValue=""
              />
            )}
</FormControl>
<FormHelperText>{errors.tests}</FormHelperText>

参考サイト

このスクラップは2022/04/17にクローズされました