Fomik FormGroup文本字段

我正在开发一个应用程序,我已经制作了一个表单框架,但有一个要求具有双字段。

最小和最大年龄

与其有两个字段——“min_age”和“max_age”——我想他们会想要一个数组字段“age”

所以他们想要的不是min_age:18和max_age:33,而是数组-age:[18,33]

我已经看到并实现了无线电和复选框组。

--但是,当我尝试将受控字段换成TextField时,该字段出现故障,并且没有更改值。

这就是我得到的--作为一个文本字段数组组

  <>
      <FormGroup
        row
        name={item.name}
        disabled={item.disabled}
        {...field}
      >
        {
          item.options.map((itm, j) => {
            return (
              <FormControlLabel key={j}
                disabled={item.disabled}
                control={
                    <div className="field field-text">
                        <TextField
                          fullWidth={false}
                          label={itm.label}
                          value={field.value[j]}
                          inputProps={{
                            maxLength: item.charLimit? item.charLimit:null,
                            autoComplete: item.autoComplete? item.autoComplete:"off"
                          }}
                          rows={(item.type === "comment") ? 6 : null}
                          multiline={(item.type === "comment") ? true : false}
                        />
                    </div>
                }
                //label={itm.label}
                onChange={(e, value) => {
                    //form.setFieldValue(item.name, value)
                    //this.props.onHandle(item.name, itm.value);
                }}
              />
            )
          })
        }
      </FormGroup>
  </>

这是一个运行良好的无线电组字段--我还没有看到任何其他文本字段由表单组控制的例子

  <>
      <RadioGroup
        row
        name={item.name}
        {...field}
      >
        {
          item.options.map((itm, j) => {
            return (
              <FormControlLabel key={j}
                value={itm.value}
                disabled={itm.disabled}
                control={<Radio />}
                label={itm.label}
                onChange={(e, value) => {
                    //form.setFieldValue(item.name, value)
                    this.props.onHandle(item.name, itm.value);
                }}
              />
            )
          })
        }
      </RadioGroup>
  </>

在这个例子中,我试图将标签包装在它周围,但字段名称是不受控制的。

https://codesandbox.io/s/formik-multi-step-set-value-context-wrapper-sezzs?file=/src/App.js:2157-2449

:rf: : "111"
:rh: : "222"
age : 18
age_array : [18, 30]
button_field : "3"