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
Vue.js verwendet Element-ui, um das Navigationsmenü zu implementieren
In diesem Artikel wird der spezifische Code zur I...
CSS zur Realisierung der Einzelauswahl-Faltmenüfunktion
Führen Sie kein Front-End-UI-Framework ein, es se...
Tutorial zur Konfiguration von SSH und Xshell für die Verbindung zum Server unter Linux (mit Bildern)
>>>>>SSH-Tutorial zur Installation...
Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP
Inhaltsverzeichnis 1. Projektbeschreibung: 2. Pro...
Detaillierte Erklärung zur Verwendung von Teleport, einer integrierten Komponente von Vue3
Inhaltsverzeichnis 1. Teleport-Nutzung 2. Vervoll...
Implementierungsschritte für Docker-Compose zum Bereitstellen eines etcd-Clusters
Inhaltsverzeichnis Schreiben Sie docker-compose.y...
Beim Ändern eines Datensatzes in MySQL lautet die Aktualisierungsoperation Feld = Feld + Zeichenfolge
In einigen Szenarien müssen wir unsere Felder vom...
Ausführliche Erklärung zu Slots und Filtern in Vue
Inhaltsverzeichnis Spielautomaten Was sind Slots?...
Das WeChat-Applet implementiert einen einfachen Rechner
Der einfache Rechner des WeChat-Applets dient Ihn...
Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.17 Winx64-Dekomprimierungsversion
In diesem Artikel wird die Installations- und Kon...
Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)
Die aktuellste Version von CentOS ist CentOS 8. A...
Vue implementiert eine gleitende Navigation oben links und rechts
Navigation und andere Dinge werden bei der täglic...
Detaillierte Erläuterung der Verarbeitung der drei Docker Nginx-Protokolle
Da die Kollegen im Unternehmen die Standardausgab...
SQL verwendet die Funktion ROW_NUMBER() OVER, um eine Sequenznummer zu generieren
Syntax: ROW_NUMBER() OVER(PARTITION BY COLUMN ORD...
Detaillierte Erläuterung mehrerer API-Beispiele, die häufig in der fortgeschrittenen JavaScript-Frontend-Entwicklung verwendet werden
Inhaltsverzeichnis MutationObserver API Merkmale ...