如何 select 形成值并在 redux 形式中相应地放置条件字段数组

Question

我在这里使用 redux 表单和此示例的基本工作，我想创建可以多次添加多个字段的表单。 我可以这样做，但是我遇到了一个问题，我想在单选按钮上添加条件，将根据条件显示字段，但我无法这样做，有人可以帮我吗？ 我想使用单选按钮显示基于 selectedCountry 变量的条件字段。

        const renderField = ({ input, label, type, meta: { touched, error } }) => (
      <div>
        <TextField
          {...input}
          className="mt-16"
          label={label}
          type={type}
          variant="outlined"
          fullWidth
        />
        {touched && error && <span style={{ color: "red" }}>{error}</span>}
        {/* </div> */}
      </div>
    );


const radioButtonCountry = ({ input, meta: { touched, error }, ...rest }) => (
  <FormControl style={{ display: "flex" }}>
    <RadioGroup
      style={{ flexDirection: "initial" }}
      {...input}
      {...rest}
      value={input.value}
      onChange={(event, value) => input.onChange(value)}
    >
      <FormControlLabel
        labelPlacement="start"
        value="Indian"
        control={<Radio />}
        label="Indian"
      />

      <FormControlLabel
        labelPlacement="start"
        value="NonIndian"
        control={<Radio />}
        label="Non Indian"
      />
    </RadioGroup>
    {touched && error && <span style={{ color: "red" }}>{error}</span>}
  </FormControl>
);

let selectedCountry;

const renderMembers = ({
  data,
  fields,
  meta: { touched, error, submitFailed },
}) => (
  //   <Grid container spacing={2}>
  <div>
    {/* {console.log(data)} */}

    <Grid item xs={12}>
      <Button
        variant="contained"
        color="primary"
        className="w-224 mx-auto mt-16 mb-16"
        type="button"
        onClick={() => fields.push({})}
      >
        Add New Company
      </Button>
      {(touched || submitFailed) && error && (
        <span style={{ color: "red" }}>{error}</span>
      )}
    </Grid>
    
    {fields.map((company, index) => (
      <Grid container spacing={3} key={index} className="mt-16">
        
        <Grid item xs={12} style={{ padding: 0, paddingInline: "12px" }}>
          <Field
            name={`${company}.country`}
            component={radioButtonCountry}
            onChange={(e) => {
              console.log("onchange", e);
              selectedCountry = e;
            }}
          >
            <Radio value="Indian" label="Indian" />
            <Radio value="NonIndian" label="Non Indian" />
          </Field>
        </Grid>
    

        {selectedCountry === "Indian" && (
          <>
            <Grid item xs={4} style={{ padding: 0, paddingInline: "12px" }}>
              <Field
                name={`${company}.panNo`}
                type="text"
                component={renderField}
                label="Pan No."
              />
            </Grid>
            <Grid item xs={4} style={{ padding: 0, paddingInline: "12px" }}>
              <Field
                name={`${company}.firmType`}
                type="text"
                component={renderField}
                label="Firm Type"
              />
            </Grid>         
                                    
          </>
        )}

        {selectedCountry === "NonIndian" && (
          <>
            <Grid item xs={4} style={{ padding: 0, paddingInline: "12px" }}>
              <Field
                name={`${company}.regNum`}
                type="text"
                component={renderField}
                label="Registration Number"
              />
            </Grid>

            <Grid item xs={4} style={{ padding: 0, paddingInline: "12px" }}>
              <Field
                name={`${company}.taxRegNum`}
                type="text"
                component={renderField}
                label="Tax Registration Number"
              />
            </Grid>
          </>
        )}

        
      </Grid>
    ))}
  </div>
);

const FieldArraysForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props;

  return (
    <form onSubmit={handleSubmit}>
      <div style={{ fontSize: "12pt" }}>Company Details</div>
      {/* {console.log(props.tcsData)} */}
      <FieldArray
        name="companys"
        component={renderMembers}
        data={props.tcsData}
      />
    </form>
  );
};

export default reduxForm({
  form: "fieldArrays", // a unique identifier for this form
  initialValues: {
    companys: [""],
  },
  validate,
})(FieldArraysForm);