Question

我无法获取复选框数组的值

const schema = yup.object().shape({
  modules: yup.array(),
});

组件

{role === "user" &&
                divisions.map((division, i) => (
                  <Box key={division.name}>
                    <Typography variant='h6'>{division.name}</Typography>
                    {division.modules.map((m, j) => (
                      <Controller
                        key={m.name}
                        name={`modules[${i}][${j}]`}
                        control={control}
                        defaultValue={[division.name, m.name, false]}
                        render={({ field }) => (
                          <FormControlLabel
                            {...field}
                            label={m.name}
                            control={
                              <Checkbox
                                onChange={(e) => (e.target.value = "chen")}
                                color='primary'
                              />
                            }
                          />
                        )}
                      />
                    ))}
                  </Box>
                ))}

当我提交表单而不检查任何内容时，我得到了这样的结果

{//userinfo,  modules: [
//array per division and a nested array for modules access
 [ ["Admin-tools", "admin",false ],  ["Admin-tools", "Backup",false ] ] 
...other divisions and modules
 ]   }

这是我检查字段并提交表单时期望的结果

 {//userinfo,  modules: [
    //array per division and a nested array for modules access
     [ ["Admin-tools", "admin",true],  ["Admin-tools", "Backup",true
 ] ] 
    ...other divisions and modules
     ]   }

但是我得到了

{//userinfo,  modules: [
//array per division and a nested array for modules access
 [ [true],  [true] ] 
...other divisions and modules
 ]   }

Answer 1

如果您想要复选框的值以便转到表单值并获取它。您必须为每个复选框指定一个 name 属性。例如：

<FormControlLabel
   {...field}
   label={m.name}
   control={
    <Checkbox
     onChange={(e) => (e.target.value = "chen")}
     color='primary'
     name='name-one'
    />
   }
/>

反应钩形式材料 ui 复选框数组

1 个答案: