Heim  >  Fragen und Antworten  >  Hauptteil

Wie rendere ich diese Optionen in einem React-Formular korrekt?

Ich versuche, die Optionen unter APPRAISAL_TYPE in meinem Reaktionsformular anzuzeigen

class Appraisal(BaseModel):
    class APPRAISAL_TYPE(models.IntegerChoices):
        self_appraisal = 1
        line_manager = 2
        coo = 3
    name = models.CharField(max_length=200, blank=True)
    category = models.IntegerField(choices=APPRAISAL_TYPE.choices, default=APPRAISAL_TYPE.self_appraisal)
    description = models.TextField(max_length=200, blank=True)
    appraisal_for = models.ForeignKey(settings.AUTH_USER_MODEL, null=True, on_delete=models.SET_NULL, related_name="re_appraisal_for")
    appraised_by = models.CharField(max_length=200, blank=True)
<InputGroup>
              <InputLeftAddon children="Category" borderRadius="16px" />
              <Select
                name="category"
                value={APPRAISAL_TYPE[appraisalDetails.status]}
                options={categoryOptions}
                onChange={(option) => handleChange(option, "category")}
              />
            </InputGroup>

Da es sich bei der Kategorie jedoch um ein Ganzzahlfeld handelt, sollte es mit APPRAISAL_TYPE verkettet werden, sodass ich eine Fehlermeldung erhalte, wenn ich eine Ganzzahl erwarte.

P粉463840170P粉463840170425 Tage vor436

Antworte allen(1)Ich werde antworten

  • P粉086993788

    P粉0869937882023-09-13 14:29:45

    你可以尝试这个

    // 如果这是一个昂贵的操作,可以使用useMemo
    let categoryOptions = Object.entries(APPRAISAL_TYPE).map(([key, value]) => {
      //console.log("item", key, value);
      // 修改属性以适应组件所需的选项
      return {
        label: value.label,
        value: parseInt(value.value)
      };
    });
    
    // React JSX
     <InputGroup>
          <InputLeftAddon children="类别" borderRadius="16px" />
          <Select
              name="category"
              value={APPRAISAL_TYPE[appraisalDetails.status]}
              options={categoryOptions}
              onChange={(option) => handleChange(option, "category")}
           />
     </InputGroup>

    使用了什么类型的Select组件,categoryOptions的属性需要相应更改

    希望能帮助您解决问题。

    Antwort
    0
  • StornierenAntwort