React implementiert die Erweiterungs- und Reduzierfunktion komplexer Suchformulare
|
Geben Sie der Zeit Zeit und lassen Sie die Vergangenheit ruhen. Im vorherigen Abschnitt haben wir über das Formular [Suchen] sowie die Abfrage- und Reset-Funktionen geschrieben. Dieser Abschnitt bietet einen Überblick über Abfrageformulare, die Expansions- und Collapse-Effekte erfordern, und erfordert hauptsächlich Kenntnisse im Front-End-Stil. Der Stileffekt ist wie folgt:
Idee: Definieren Sie in der Suchkomponente zwei Komponenten renderAdvancedForm und renderSimpleForm. RenderSimpleForm hat nur fünf Abfrageoptionen, während renderAdvancedForm alle Suchoptionen enthält. Klicken Sie auf die Schaltfläche „Erweitern“ oder „Reduzieren“ und rufen Sie onClick={toggleForm} auf, um den Anzeigestil des Formulars zu ändern. 1. Schreiben Sie renderSimpleForm und renderAdvancedFormVerwenden Sie Col und Row, um die Zeilen in Blöcke zu unterteilen, und achten Sie darauf, ein Klickereignis für die Erweiterungsschaltfläche hinzuzufügen.
const renderSimpleForm = useMemo(() => {
const { getFieldDecorator } = Formular
const { query } = Standort abrufen()
zurückkehren (
<Formularlayout="inline">
<Zeile>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24} style={{ textAlign: 'right' }}>
<a
beiKlick={toggleForm}
Stil={{ marginRight: '15px' }}
Klassenname={styles.a}
>
Erweitern <Icon type="down" />
</a>
<Button bei Klick = {handleSearch} Klassenname = {'searchBtn'}>
<img src={search} alt="" />
Abfrage</Button>
<Button bei Klick = {handleFormReset} Klassenname = {'resetBtn'}>
<img src={reset} alt="" />
Zurücksetzen</Button>
</Col>
</Zeile>
</Form>
)
}, [Formular, Formular-Reset-Handle, Such-Handle, Formular umschalten])In ähnlicher Weise müssen Sie Rol und Row verwenden, um zwei Zeilen festzulegen, eine Schließen-Schaltfläche an der entsprechenden Position zu belassen und eine Klickfunktion für die Schließen-Schaltfläche hinzuzufügen
const renderAdvancedForm = useMemo(() => {
const { getFieldDecorator, getFieldValue } = Formular
const { query } = Standort abrufen()
zurückkehren (
<Formularlayout="inline">
<Zeilenstil={{ marginBottom: '20px' }}>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24} style={{ textAlign: 'right' }}>
<a
beiKlick={toggleForm}
Stil={{ marginRight: '15px' }}
Klassenname={styles.a}
>
Zusammenklappen<Icon type="up" />
</a>
<Button bei Klick = {handleSearch} Klassenname = {'searchBtn'}>
<img src={search} alt="" />
Abfrage</Button>
<Button bei Klick = {handleFormReset} Klassenname = {'resetBtn'}>
<img src={reset} alt="" />
Zurücksetzen</Button>
</Col>
</Zeile>
<Zeile>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
</Zeile>
</Form>
)
}, [Formular, Formular-Reset-Handle, Such-Handle, Zeit1, Zeit2, Formular umschalten])2. Fügen Sie die Funktion „ToggleForm“ hinzu, um zwischen „Erweitern“ und „Reduzieren“ zu wechseln.
const toggleForm = useCallback(() => {
setExpandForm(!expandForm)
}, [expandForm])3. Rendern Sie den Formulareffekt nach Bedarf in der Suchkomponente
zurückkehren (
<Karte umrandet={false}>
<div Klassenname={styles.search}>
{expandForm? renderAdvancedForm: renderSimpleForm}
</div>
</Karte>
)4. Anbei der komplette Code der Suchkomponente
const Suche: any = Form.create()(function({ form, init }: any) {
const { validateFields } = Formular
const [expandForm, setExpandForm] = useState(false)
const [Zeit11, setzeZeit11] = useState('')
const [Zeit21, setzeZeit21] = useState('')
const [Zeit1, setzeZeit1] = useState(Moment().format('JJJJ-MM-TT'))
const [Zeit2, setzeZeit2] = useState(Moment().format('JJJJ-MM-TT'))
const handleSearch = useCallback(() => {
validateFields((err: beliebig, data: beliebig) => {
pushPfad({
Abfrage: {
...Daten,
Seitennummer: 1,
orderTimeStart: Zeit11,
orderTimeEnd: Zeit21,
Bestellnummer: data.orderNumber.replace(/\s+/g, ''),
Experimentname: Daten.Experimentname.replace(/\s+/g, ''),
Benutzername: data.userName.replace(/\s+/g, ''),
Mobil: Daten.mobile.replace(/\s+/g, ''),
PreisNiedrig: data.priceLow.replace(/\s+/g, ''),
PreisHoch: data.priceHigh.replace(/\s+/g, '')
}
})
init()
})
}, [init, Zeit11, Zeit21, Felder validieren])
const handleFormReset = useCallback(() => {
Pfad löschen()
pushPfad({
Abfrage: { Seitengröße: 10, Seitennummer: 1 }
})
init()
form.resetFields()
}, [Formular, init])
const toggleForm = useCallback(() => {
setExpandForm(!expandForm)
}, [expandForm])
const renderSimpleForm = useMemo(() => {
const { getFieldDecorator } = Formular
const { query } = Standort abrufen()
zurückkehren (
<Formularlayout="inline">
<Zeile>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('Bestellnummer', {
Anfangswert: Abfragename || ''
})(<Input placeholder="Anforderungsnummer" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('experimentName', {
Anfangswert: Abfragename || ''
})(<Input placeholder="Anforderungsname" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('Benutzername', {
Anfangswert: Abfragename || ''
})(<Input placeholder="Benutzername" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('mobile', { initialValue: query.name || '' })(
<Input placeholder="Telefonnummer" />
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('status', {
Anfangswert:
query.type === undefiniert ? '' : query.type.toString()
})(
<Auswählen>
<Optionswert={''} deaktiviert>
{' '}
Experimenteller Status {' '}
</Option>
{testStatus.map((v: beliebig) => (
<Optionsschlüssel={v.key} Wert={v.key}>
{v.Wert}
</Option>
))}
</Auswählen>
)}
</FormItem>
</Col>
<Col md={4} sm={24} style={{ textAlign: 'right' }}>
<a
beiKlick={toggleForm}
Stil={{ marginRight: '15px' }}
Klassenname={styles.a}
>
Erweitern <Icon type="down" />
</a>
<Button bei Klick = {handleSearch} Klassenname = {'searchBtn'}>
<img src={search} alt="" />
Abfrage</Button>
<Button bei Klick = {handleFormReset} Klassenname = {'resetBtn'}>
<img src={reset} alt="" />
Zurücksetzen</Button>
</Col>
</Zeile>
</Form>
)
}, [Formular, Formular-Reset-Handle, Such-Handle, Formular umschalten])
const renderAdvancedForm = useMemo(() => {
const { getFieldDecorator, getFieldValue } = Formular
const { query } = Standort abrufen()
Funktion disabledDate1(aktuell: beliebig) {
Strom zurückgeben && Strom > Zeit2
}
Funktion disabledDate2(aktuell: beliebig) {
Strom zurückgeben && Strom < Zeit1
}
Funktion change1(Datum: beliebig, Datumszeichenfolge: beliebig) {
settime1(Datum)
settime11(Datumszeichenfolge)
}
Funktion change2(Datum: beliebig, Datumszeichenfolge: beliebig) {
settime2(Datum)
settime21(Datumszeichenfolge)
}
const dataValidate = (Regel: beliebig, Wert: beliebig, Rückruf: beliebig) => {
wenn (Wert && parseInt(Wert) > parseInt(getFieldValue('priceHigh'))) {
Rückruf('kann nicht höher als der Maximalwert sein')
} sonst wenn (
Wert &&
parseInt(Wert) < parseInt(getFieldValue('PreisNiedrig'))
) {
Rückruf('kann nicht niedriger als der Mindestwert sein')
} anders {
Rückruf()
}
}
zurückkehren (
<Formularlayout="inline">
<Zeilenstil={{ marginBottom: '20px' }}>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('Bestellnummer', {
Anfangswert: Abfragename || ''
})(<Input placeholder="Anforderungsnummer" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('experimentName', {
Anfangswert: Abfragename || ''
})(<Input placeholder="Anforderungsname" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('Benutzername', {
Anfangswert: Abfragename || ''
})(<Input placeholder="Benutzername" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('mobile', { initialValue: query.name || '' })(
<Input placeholder="Telefonnummer" />
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('status', {
Anfangswert:
query.type === undefiniert ? '' : query.type.toString()
})(
<Auswählen>
<Option value={''}> Experimenteller Status</Option>
{testStatus.map((v: beliebig) => (
<Optionsschlüssel={v.key} Wert={v.key}>
{v.Wert}
</Option>
))}
</Auswählen>
)}
</FormItem>
</Col>
<Col md={4} sm={24} style={{ textAlign: 'right' }}>
<a
beiKlick={toggleForm}
Stil={{ marginRight: '15px' }}
Klassenname={styles.a}
>
Zusammenklappen<Icon type="up" />
</a>
<Button bei Klick = {handleSearch} Klassenname = {'searchBtn'}>
<img src={search} alt="" />
Abfrage</Button>
<Button bei Klick = {handleFormReset} Klassenname = {'resetBtn'}>
<img src={reset} alt="" />
Zurücksetzen</Button>
</Col>
</Zeile>
<Zeile>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('PreisNiedrig', {
Anfangswert: Abfragename || '',
Regeln: [{ validator: dataValidate }]
})(<Input placeholder="Gesamtpreisspanne" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('PreisHoch', {
Anfangswert: Abfragename || '',
Regeln: [{ validator: dataValidate }]
})(<Input placeholder="Gesamtpreisspanne" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderTimeStart', {
Anfangswert: Abfragename || ''
})(
<Datumsauswahl
beiÄnderung={Änderung1}
disabledDate={disabledDate1}
Platzhalter="Bestellzeit"
/>
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderTimeEnd', {
Anfangswert: Abfragename || ''
})(
<Datumsauswahl
beiÄnderung={Änderung2}
disabledDate={disabledDate2}
Platzhalter="Bestellzeit"
/>
)}
</FormItem>
</Col>
</Zeile>
</Form>
)
}, [Formular, Formular-Reset-Handle, Such-Handle, Zeit1, Zeit2, Formular umschalten])
zurückkehren (
<Karte umrandet={false}>
<div Klassenname={styles.search}>
{expandForm? renderAdvancedForm: renderSimpleForm}
</div>
</Karte>
)
})Damit ist dieser Artikel über die Implementierung der Expand-Collapse-Funktion komplexer Suchformulare in React abgeschlossen. Weitere relevante Inhalte zum Expandieren und Collapsen von React-Formularen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Sprechen Sie über implizite Konvertierung in MySQL
>>: Eine kurze Erläuterung der Unterschiede zwischen FTP, FTPS und SFTP
Artikel empfehlen
Erste Schritte Tutorial für Neulinge ⑤: Die Registrierung auf der Website ist sehr einfach, Tipps zur schnellen Registrierung
Freunde, die Speicherplatz gekauft und Websites er...
So erstellen Sie eine LNMP-Umgebung unter Ubuntu 20.04
Einfache Beschreibung Da es zuvor mit Centos7 ers...
Docker-Container sichert regelmäßig die Datenbank und sendet sie an das angegebene Postfach (Designidee)
Inhaltsverzeichnis 1. Hintergrund: 2. Gestaltungs...
Detaillierte Erklärung der Verwendung von Vorlagen-Tags (einschließlich Zusammenfassung der Verwendung in Vue)
Inhaltsverzeichnis 1. Template-Tag in HTML5 2. Ei...
Ausführliche Erklärung der Sonderberechtigungen SUID, SGID und SBIT in Linux
Vorwort Für die Berechtigungen von Dateien oder V...
Einführung in die Funktionen und Verwendung von Wert- und Namensattributen in HTML
1. Der in der Schaltfläche verwendete Wert bezieht...
Reines CSS3 zum Erstellen eines Beispielcodes für Seitenwechseleffekte
Das, was ich vorher geschrieben habe, ist zu komp...
Die Scroll-Ansicht des WeChat-Applets realisiert die Verknüpfung nach links und rechts
In diesem Artikel wird der spezifische Code für d...
5 JavaScript-Möglichkeiten zum Abflachen von Arrays
Inhaltsverzeichnis 1. Konzept der Array-Abflachun...
Eine kurze Diskussion über die Implementierung der MySQL-Lösung zur Optimierung des Seitenlimits
MySQL begrenzt die Nutzung von Paging-Anweisungen...
So verstehen Sie die Modularität von JavaScript
Inhaltsverzeichnis 1. Browserunterstützung 2. Exp...
Der MySQL-Tagesstatistikbericht trägt 0 ein, wenn für diesen Tag keine Daten vorliegen
1. Reproduktion des Problems: Zählen Sie die Gesa...
Tutorial zur kostenlosen Konfiguration der MySQL 5.7.18-Installationsversion
Installations-Tutorial zur kostenlosen Installati...
Lösung für das Problem, dass die Div-Breite auf width:100% eingestellt ist und dann die Polsterung oder der Rand das übergeordnete Element überschreitet
Vorwort In diesem Artikel wird erläutert, wie Sie...
Mit JS in zehn Minuten die Existenz von Elementen in einem Array bestimmen
Vorwort In der Front-End-Entwicklung müssen Sie h...