So verwenden Sie die Form-Komponente von Antd in React, um Formularfunktionen zu implementieren

importiere React von „react“;
importiere {Formular, Tabelle, Schaltfläche, Auswahl, Eingabe, Datumsauswahl} aus „antd“;
 
const FormItem = Form.Item;
const Option = Auswählen.Option;
const {RangePicker} = DatePicker; //Holen Sie sich das Datumsbereichssteuerelement in der Datumsauswahlsteuerelementklasse UserManage extends React.Component {
  rendern() {
    const Spalten = [
      {
        Titel: 'Ansprechpartner',
        dataIndex: 'Benutzername',
        Schlüssel: 'Benutzername',
      }, {
        Titel: 'Mobiltelefonnummer',
        Datenindex: "mobil",
        Schlüssel: 'mobile',
      }, {
        Titel: 'Firmenname',
        Datenindex: "Firmenname",
        Schlüssel: 'Firmenname',
      }, {
        Titel: „Letzte aktive Zeit“,
        dataIndex: 'letzteOnlineZeit',
        Schlüssel: 'lastOnlineTime',
      }, {
        Titel: 'Stummschaltungsstatus',
        Datenindex: "Status",
        Schlüssel: 'Status',
      },
    ];
 
    zurückkehren (
      <div>
        <Formularlayout="inline" Stil={{marginBottom: '10px'}}>
          <FormItem label="Letzte aktive Zeit">
            <RangePicker-Stil = {{Breite: '255px'}}/>
          </FormItem>
          <FormItem label="Benutzer">
            <Input type="text" placeholder="Firmenname, Mobiltelefonnummer" style={{width: '155px'}}/>
          </FormItem>
          <FormItem label="Stummschaltungsstatus">
            <Standardwert auswählen="Alle" style={{width: '155px'}}>
              <Optionswert="Alle">Alle</Option>
              <Optionswert="Ja">Ja</Option>
              <Optionswert="Nein">Nein</Option>
            </Auswählen>
          </FormItem>
          <Button type="primary" style={{marginTop: '3px', marginRight: '3px'}}>Abfrage</Button>
          <Button style={{marginTop: '3px'}}>Zurücksetzen</Button>
        </Form>
        <Tabelle
          Spalten={Spalten}
        />
      </div>
    )
  }
}
 
Standard exportieren Form.create()(Benutzerverwaltung) 

...
machen(){
    const {form} = diese.props;
    const {getFieldDecorator} = Formular;
...
    zurückkehren (
      <div>
        <Formular bei Übermittlung={this.handleQuery} layout="inline" style={{marginBottom: '10px'}}>
          <FormItem label="Letzte aktive Zeit">
            {getFieldDecorator('lastOnlineTime')(<RangePicker style={{width: '255px'}}/>)}
          </FormItem>
          <FormItem label="Benutzer">
            {getFieldDecorator('userQueryLike')(<Input type="text" placeholder="Firmenname oder Mobiltelefonnummer" style={{width: '155px'}}/>)}
          </FormItem>
          <FormItem label="Stummschaltungsstatus">
            {getFieldDecorator('status', {initialValue: "alle"})(
            <Stil auswählen={{width: '155px'}}>
              <Optionswert="0">Alle</Option>
              <Optionswert="1">Ja</Option>
              <Option value="2">Nein</Option>
            </Auswählen>)}
          </FormItem>
          <Button type="primary" htmlType="submit" style={{marginTop: '3px', marginRight: '3px'}}>Abfrage</Button>
          <Button style={{marginTop: '3px'}}>Zurücksetzen</Button>
        </Form>
        <Tabelle
          columns={columns} /*dataSource={(vom Modell erhaltene Daten)}*/
        />
      </div>
    )
}
... 

...
Klasse UserManage erweitert React.Component {
  //Formularabfrage handleQuery = (e) => {
    wenn (e) e.preventDefault();
    const {dispatch, form} = diese.props;
    form.validateFields((err, fieldsValue) => {
      wenn (Fehler) zurückgeben;
      //Wert des Zeitbereichs abrufen const rangeValue = fieldsValue['lastOnlineTime'];
      const userQueryLike = FelderWert['userQueryLike'];
      //Abfragebedingungen abrufen const values ​​​​= {
        ...FelderWert,
        "letzteOnlinezeit": (Bereichswert und Bereichswert.Länge > 1) ?
          ([Bereichswert[0].format('JJJJ-MM-TT'), Bereichswert[1].format('JJJJ-MM-TT')]) : null,
        "userQueryLike": BenutzerQueryLike ? userQueryLike.trim() : BenutzerQueryLike,
      };
      versenden({
        Typ: "userManageModel/getUserList",
        Nutzlast: {
          Werte: Werte,
        }
      });
 
    });
  };
...
}
...