從 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>
)}