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
Analyse der MySql-Indexnutzungsstrategie
MySql-Index Indexvorteile 1. Sie können die Einde...
Front-End-JavaScript versteht Funktions-Currying gründlich
Inhaltsverzeichnis 1. Was ist Curry 2. Verwendung...
MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Docker
Docker installiert MySQL Version 8.0.20 zu Ihrer ...
So ändern Sie die Schaltfläche „Durchsuchen“ des HTML-Formulars zum Hochladen von Dateien
Code kopieren Der Code lautet wie folgt: <!DOC...
Allgemeine Befehle zum Bereitstellen von InfluxDB und Mongo mit Docker
Bereitstellen einer Datenbank basierend auf Docke...
Detailliertes Tutorial zum Kompilieren und Installieren von Python3.6 unter Linux
1. Gehen Sie zunächst auf die offizielle Website ...
Detaillierte Erklärung der verschiedenen Verwendungen von proxy_pass in nginx
Inhaltsverzeichnis Proxy-Weiterleitungsregeln Der...
So deinstallieren Sie MySQL 5.7 unter CentOS7
Überprüfen Sie, was in MySQL installiert ist grep...
Über die „Berufskrankheit“ der Designer
Ich habe immer das Gefühl, dass Designer die sens...
Zählen Sie die Listen-Tags in HTML
1. <dl> definiert eine Liste, <dt> de...
Die Verwendung eines eindeutigen MySQL-Schlüssels in Abfragen und damit verbundene Probleme
1. Tabellenanweisung erstellen: CREATE TABLE `Mit...
Vue+Flask realisiert Videosynthesefunktion (Drag & Drop-Upload)
Inhaltsverzeichnis Wir haben in einem früheren Ar...
Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen
Das Entwerfen der Navigation für eine Website ist...
Detaillierte Erläuterung der benutzerdefinierten Konfiguration des offiziellen Docker-MySQL-Image
Um Installationszeit zu sparen, habe ich zum Star...
So verwenden Sie Zen-Codierung in Dreamweaver
Nachdem ich meinen letzten Artikel „Zen Coding: Ei...