从 Formik & Material UI 表单中获取字段值

Question

我正在尝试根据单选组的值禁用复选框组。 我遵循了Formik 教程最后一部分中使用的方法。 使用反应上下文从表单本身中消除了很多混乱，但我现在不确定如何公开一些值。

在下面的表单中，在CheckboxGroup组件中，如果radio4的值为“yes”，我将尝试打印disabled作为checkbox1的属性。 我不确定这里应该使用什么值，因为fields不起作用。 给定使用的 React Context 方法，如何将值传递给表单？

表格：

export default function HealthAssessmentForm() {
    
  return (

          <Formik
              initialValues={{
                  radio4: '',
                  symptoms: '',
              }}
        
              onSubmit={async (values) => {
                  await new Promise((r) => setTimeout(r, 500));
                  console.log(JSON.stringify(values, null, 2));
              }}
              validator={() => ({})}
          >
                  <Form>
                
                  <RadioInputGroup
                          label="Disable the checkbox?"
                          name="radio4"
                          options={['Yes','No']}
                      />
                      
                      <CheckboxGroup
                          {(fields.radio4.value === "yes") ? "disabled" : null}
                        name="checkbox1"
                        options={[
                            {name:"hello",label:"hello"},
                            {name:"there",label:"there"},
                            
                          ]}
                      />
                      <button type="submit">Submit</button>
                  </Form>
          </Formik>
    )
}

我不确定自定义组件在这里是否相关，但是......

const RadioInputGroup = (props) => {
    
    const [field, meta] = useField({...props, type:'radio'});
    return (
        <FormControl component="fieldset">
            <FormLabel component="legend">{props.label}</FormLabel>
            <RadioGroup aria-label={props.name} name={props.name} value={props.value}>
                <FieldArray name="options">
                    {({ insert, remove, push }) => (
                        props.options.length > 0 && props.options.map((option,index) => (
                            <FormControlLabel key={index} {...props}  value={option.toLowerCase()} control={<Radio />} label={option} />
                        ))
                    )}
                </FieldArray>
            </RadioGroup>
        </FormControl>
    )
};

const CheckboxGroup = (props) => {
    const [field, meta] = useField({...props, type: 'checkbox', });
    return (
        <FormControl component="fieldset">
            <FormLabel component="legend">{props.label}</FormLabel>
            <FormGroup>
                <FieldArray name="options">
                    {({ insert, remove, push}) => (
                        props.options.length > 0 && props.options.map((option,index) => (
                            
                            <FormControlLabel
                                {...field} {...props}
                                key={index}
                                control={<Checkbox />}
                                label={option.label}
                            />
                            ))
                    )}
                </FieldArray>
                
            </FormGroup>
            <FormHelperText>Be careful</FormHelperText>
        </FormControl>
    )
}

Answer 1

我将整个<Form>包装在一个 function 中，该 function 将props作为参数传递。 然后我可以访问props.values.radio1 。 但是，这暴露了即使单击 radio1 也没有值，这应该是一个单独的问题。

{(props) => (
     <Form>
<RadioInputGroup
   label="Disable the checkbox?"
    name="radio4"
   options={['Yes','No']}
/>
                      
                      <CheckboxGroup
                        disabled={props.values.radio1 === "No"}
                        name="checkbox1"
                        options={[
                            {name:"hello",label:"hello"},
                            {name:"there",label:"there"},
                            
                          ]}
                      />     </Form>
)}