从 Formik 和 Material UI 表单中获取字段值答案

【问题标题】：get field value from Formik & Material UI form从 Formik 和 Material UI 表单中获取字段值
【发布时间】：2021-03-23 20:40:22
【问题描述】：

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

在下面的表格中，在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>
    )
}

【问题讨论】：

标签： javascript reactjs material-ui formik

【解决方案1】：

我将整个<Form> 包装在一个将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>
)}

【讨论】：