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
Lassen Sie uns ausführlich über die Requisitenattribute von Komponenten in Vue sprechen
Inhaltsverzeichnis Frage 1: Wie werden Requisiten...
Docker führt Vorgänge mit dem angegebenen Speicher aus
wie folgt: -m, --memory Speicherlimit, das Format...
Detaillierte Erklärung der Kodierungsprobleme bei MySQL-Befehlszeilenoperationen
1. Überprüfen Sie die MySQL-Datenbankkodierung my...
Detailliertes Tutorial zur Verwendung des Plugins tomcat8-maven-plugin in Maven
Ich habe viele Artikel online durchsucht, aber ke...
Vue verwendet Filter zum Formatieren von Daten
In diesem Artikelbeispiel wird der spezifische Co...
mysql8.0: Passwortänderung vergessen und Problem mit ungültigem Net-Befehlsdienstnamen
Geben Sie net start mysql in cmd ein und die Eing...
Analyse gängiger Anwendungsbeispiele von MySQL-Prozessfunktionen
Dieser Artikel veranschaulicht anhand von Beispie...
Beispiel für die reguläre Umschreibmethode für Nginx Rewrite (Matching)
Die Rewrite-Funktion von Nginx unterstützt regelm...
Beispiel für die Installation von Kong Gateway in Docker
1. Erstellen Sie ein Docker-Netzwerk Docker-Netzw...
Analyse und Zusammenfassung der Auswirkungen von MySQL-Transaktionen auf die Effizienz
1. Datenbanktransaktionen verringern die Datenban...
Lösung für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung
Inhaltsverzeichnis Problembeschreibung: Lösung 1 ...
So aktivieren Sie TLS- und CA-Authentifizierung in Docker
Inhaltsverzeichnis 1. Zertifikat generieren 2. Ak...
So verbinden Sie die Idee mit Docker, um eine Bereitstellung mit einem Klick zu erreichen
1. Ändern Sie die Docker-Konfigurationsdatei und ...
Detaillierte Erklärung der Serveroptionen von Tomcat
1. Konfiguration Die ersten beiden sind standardm...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15
In diesem Artikel wird die Installations- und Kon...