Closed1
【React・Material-ui】React-Hook-Formで複数選択可能なMaterial-uiのCheckBoxボタンを実装する。
何について書く?
- 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>
参考サイト
- https://bleepcoder.com/ja/react-hook-form/601272404/mui-checkbox-data-is-not-appearing-when-firing-the
- https://material-ui.com/ja/components/checkboxes/
- https://stackoverflow.com/questions/61475234/material-ui-react-form-hook-multiple-checkboxes-default-selected
- https://qiita.com/lostfind/items/e2a2ae1075c76f15c40b
このスクラップは2022/04/17にクローズされました