Datos rinkiklio sukūrimas „React“ – „SitePoint“.

Kuriant „React“ programą, gali prireikti, kad vartotojai galėtų pasirinkti datas – rezervavimo sistemai, formai ar kalendoriui. Vienas iš patogiausių būdų tai padaryti yra įdiegti a datos rinkiklis. Šis vadovas padės jums pridėti datos parinkiklį prie programos „React“, naudojant react-datepicker biblioteka.

1 veiksmas: nustatykite savo reakcijos projektą

Prieš pradėdami įsitikinkite, kad turite a Reagavimo projektas sukurtas. Jei jo neturite, galite greitai sukurti jį paleisdami npx create-react-app my-datepicker-app. (Skaityti apie Sukurkite programą „React“. Norėdami sužinoti daugiau.)

2 veiksmas: įdiekite react-datepicker

Pirmas žingsnis yra pridėti react-datepicker paketą jūsų projektui. Atidarykite terminalą, eikite į savo projekto katalogą ir paleiskite šią komandą:

npm install react-datepicker

Ši komanda įdiegiama react-datepicker ir jo priklausomybės nuo jūsų projekto.

3 veiksmas: importuokite react-datepicker

Įdiegę paketą, dabar galite jį naudoti savo „React“ komponente. Atidarykite komponento failą, kuriame norite įtraukti datos rinkiklį, ir viršuje pridėkite šį importavimo teiginį:

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Pirmoji eilutė importuoja DatePicker komponentas, o antroji eilutė importuoja numatytąjį stilių. Tai labai svarbu, kad datos rinkiklis tinkamai atvaizduotų.

4 veiksmas: naudojimas DatePicker Jūsų komponente

Dabar pridėkime DatePicker atvaizdavimo metodo komponentas arba grąžinimo sakinys, jei naudojate funkcinį komponentą. Taip pat turėsite tvarkyti pasirinktą datą savo komponento būsenoje.

Štai kaip tai galite padaryti klasės komponente:

import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class MyDatePicker extends Component {
  state = {
    
    startDate: null
  };

  handleChange = date => {
    this.setState({
      startDate: date
    });
  };

  render() {
    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }
}

export default MyDatePicker;

Funkcinio komponento, kuriame naudojami kabliukai, kodas atrodo taip:

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const MyDatePicker = () => {
  const [startDate, setStartDate] = useState(null);

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
    />
  );
};

export default MyDatePicker;

5 veiksmas: tinkinimas ir parinktys

react-datepicker siūlo platų rekvizitų asortimentą, skirtą pritaikyti datos rinkiklio išvaizdą ir funkcionalumą. Kai kurios tinkinimo parinktys apima:

• datos formatas: leidžia keisti rodomos datos formatą.
• minDate ir maxDate: apribokite pasirenkamą dienų seką.
• eilutę: Pateikite datos rinkiklį eilute, o ne kaip išskleidžiamąjį meniu.
• su portalu: pateikia datos rinkiklį portale, kuris gali padėti išspręsti sudėtingų išdėstymų padėties nustatymo problemas.

Štai tinkinto pavyzdys DatePicker:

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  dateFormat="yyyy/MM/dd"
  minDate={new Date()}
  maxDate={new Date().setMonth(new Date().getMonth() + 1)}
  inline
/>

Problemos, kurių reikia saugotis

Kuriant datos parinkiklį „React“ programose, sutelkus dėmesį į keletą pagrindinių problemų, galima pagerinti naudojimo patogumą, prieinamumą ir funkcionalumą:

1. Naršyklės suderinamumas. Užtikrinkite nuoseklų veikimą visose tikslinėse naršyklėse, nes skirtumai gali turėti įtakos datos rinkiklio elgesiui ir išvaizdai.
2. Reaktyvus dizainas. Datos rinkiklis turėtų sklandžiai veikti įvairaus dydžio ekrano įrenginiuose, užtikrindamas gerą naudotojo patirtį tiek staliniuose kompiuteriuose, tiek mobiliuosiuose įrenginiuose.
3. Prieinamumas. Įdiekite klaviatūros naršymą, ekrano skaitytuvo palaikymą ir ARIA atributus, kad datos rinkiklis būtų pasiekiamas visiems naudotojams, įskaitant turinčius negalią.
4. Lokalizavimas ir internacionalizavimas. Palaikykite įvairias kalbas ir datos formatus, kad galėtumėte patenkinti pasaulinę auditoriją ir užtikrinti, kad datos rinkiklis atitiktų jūsų vartotojų kultūrinius ir kalbinius lūkesčius.
5. Laiko juostos tvarkymas. Tiksliai tvarkykite laiko juostas, ypač skirtinguose regionuose naudojamoms programoms, kad išvengtumėte painiavos ir klaidų pasirenkant datą.
6. Spektaklis. Atsižvelkite į poveikį programos našumui ir prireikus optimizuokite, kad veikla veiktų sklandžiai ir greitai reaguoja.
7. Priklausomybės valdymas. Reguliariai atnaujinkite datos rinkiklio biblioteką, kad gautumėte naudos iš saugos pataisų ir naujų funkcijų, tačiau kruopščiai išbandykite, kad nekiltų naujų problemų.

Išvada

Datos rinkiklio integravimas į programą „React“ gali žymiai pagerinti vartotojo patirtį, nes suteikia paprastą ir veiksmingą datų pasirinkimo būdą. The react-datepicker biblioteka leidžia lengvai pridėti tinkinamą ir stilingą datos rinkiklį prie programos naudojant tik kelias kodo eilutes.

Eksperimentuokite su react-datepickerĮvairūs rekvizitai ir parinktys, leidžiančios visiškai išnaudoti savo potencialą ir pritaikyti datos rinkiklį, kad jis puikiai atitiktų jūsų programos poreikius.