Үйл явц нэмэх

Төлөв үүсгэх хичээлд App компонентийн бүх төлвүүдийг нэг дор state обьектод багцалсан. react -ийн төлвүүдтэй хэрхэн ажиллахыг харахын тулд App компонентод товч оруулаад түүн дээр дарахад h1 гарчигаар үзүүлэх текстийг солигдох ажиллагааг оруулъя. Үүний тулд App компонентийн кодод h1 гарчигийн доор

        <h1>
          {this.state.pageTitle}
        </h1>
        <button>Гарчиг өөрчлөх</button>
        <Car name={cars[0].name} year={cars[0].year} />

button тегээр Гарчиг өөрчлөх нэртэй товчийг нэмэн оруулаад хуудсаа харвал

Гарчиг өөрчлөх нэртэй товч нэмэгдэнэ. h1 гарчигаар үзүүлэх текстийг солихдоо нэмсэн товчдоо үйл явцын сонсогчийг тавиад түүгээр дамжуулан төлвийг өөрчлөх юм. javascript -д үйл явц нэмэхдээ onclick, onfocus гэх мэтээр үйл явдлын нэрээ өгөөд = тэмдгийн ард тухайн үйл явцын боловсруулагчийг өгдөг. Жишээ нь <button onclick="handlerFunc()">Гарчиг өөрчлөх</button>
Тэгвэл reactjavascript -ийн бүх боломж нээлттэй тул Jsx -д үйл явцыг javascript -тэй их төстэйгээр тавин өгдөг. Ердийн html -д үйл явцын нэрийг жижиг үсгээр бичдэг бол react -д үйл явцын нэрийг camelCase дүрмээр

<button onClick={}>Гарчиг өөрчлөх</button>

бичин өгдөг. onClick атрибутын утгаар юуг дамжуулах талаар ярилцая. Атрибутын утгаар onClick үйл явдал бий болоход биелэгдэх ёстой функцийн холбоосыг дамжуулна. Үйл явдал үүсэхэд ажиллах

  changeTitleHandler = () => {
    console.log("Товч дарагдсан")
  }

функцийг компонентод үүсгэн өгье. Компонентийн render функц хэвийг үүсгэхдээ бусад функцуудийг ашигладаг учраас голдуу кодийн сүүл хэсэгт бичдэг. Энэ нь react компонентийн кодод баримжаа авахад эвтэйхэн байдаг тул changeTitleHandler функцийг render функцийн дээр тодорхойлон өгөөрэй. Ямар нэгэн үйл явцын боловсруулагчдыг Handler нэрээр голдуу нэрлэдэг тул гарчигийг солих үйл явцын боловсруулагчийг changeTitleHandler гэж нэрлэсэн хэрэг. React компонентод аргуудыг

  changeTitleHandler() {
    console.log("Товч дарагдсан")
  }

  changeTitleHandler: function() {
    console.log("Товч дарагдсан")
  }

гэх мэтээр олон янзаар үүсгэж болох ч кодод бид ES6 -гийн сумаар тодорхойлогдох функцээр тодорхойлон өгсөн. Үйл явцын боловсруулагчийн кодоор одоохондоо Товч дарагдсан гэсэн мэдээллийг консолд харуулах операторийг өгье. Үйл явцын боловсруулагч функцийг үүсгэсэн болохоор түүнийг товчны onClick үйл явцын боловсруулагчаар

        <button onClick={this.changeTitleHandler}>Гарчиг өөрчлөх</button>

гэж өгдөг. Тухайн компонентийн бүх элементүүдийг агуулж байдаг this түлхүүр үгээр нэрлэгдэх обьектын changeTitleHandler талбарын утгыг onClick атрибутын утгаар өгнө. changeTitleHandler талбарт функцийн холбоос хадгалагдаж байдаг. Хэрвээ changeTitleHandler() гэж өгвөл функцийг дуудах болохыг анхаарна уу. Ингээд манай App компонентийн код

class App extends Component {

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент'
  }

  changeTitleHandler = () => {
    console.log("Товч дарагдсан")
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <button onClick={this.changeTitleHandler}>Гарчиг өөрчлөх</button>
        <Car name={cars[0].name} year={cars[0].year} />
        <Car name={cars[1].name} year={cars[1].year} />
        <Car name={cars[2].name} year={cars[2].year} />
      </div>
    )
  }
}

болох бөгөөд өөрчлөлтийг хадгалаад хуудсаа нээгээд Гарчиг өөрчлөх товч дээр дарвал

ConsoleТовч дарагдсан мэдээллийг харуулна.
react сангийн албан ёсны сайтаас

Jsx -д ашиглаж болох бүх үйл явцуудын мэдээллийг хараж болно. Эндээс өөрийн сонирхож буй үйл явцын ангилалыг сонгон орвол ашиглаж болох бүх үйл явцын нэрүүд, шинж зэргийг харуулна. changeTitleHandler функцэд гарчигийг солих ажиллагааны логикийг дараагийн хичээлээс үзээрэй.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 230 Нийтийн

Өмнөх хичээлүүдэд бид react -ийг нилээд сайн судлан энгийн төслийг үүсгэн ажлуулж сурсан. Одоо react компонентуудийн талаар цааш гүнзгийрүүлэн судлах цаг болсон. Хичээлээр Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод параметр дамжуулахыг авч үзье. Үүнийг төслийн App компонент дээр харцгаая. App компонентийг index.js файлд

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM сангийн render аргаар DOM -д оруулан өгч байгаа.

  Нээгдсэн тоо: 103 Бүртгүүлэх

Бид Дадлага. /Төсөл үүсгэх/ хичээлээр өмнөх хичээлүүдэд үзсэн онолын мэдлэгээ батагах үүднээс төслийг үүсгэсэн. Одоо дадлагын төслийн зохион байгуулалтыг хариуцах суурь компонентийг үүсгэе. Энэ компонент сайтад үзүүлэх хуудасны бүх элементүүдийг багцлан агуулах юм. Энэхүү суурь компонент бусад компонентуудийг багцлах тул дээд түвшингийн компонент гэж үзэж болно.

  Нээгдсэн тоо: 1128 Нийтийн

Хичээлээр директивийн боломжуудыг хэрхэн өргөжүүлэхийг авч үзье. Эхлээд төслийн кодыг багахан цэгцлэе. Хичээлд Өөрийн директив үүсгэх , Директивийн амьдралын цикл хичээлийн жишээг ашиглах тул хичээлүүдийг үзэхийг зөвлөе. Директивийн амьдралын циклийг шалгахаар App компонентод нэмсэн товчнуудыг хасан

<template>
  <div>
      <h2 v-colored>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }
}
</script>

кодтой болгосон.

  Нээгдсэн тоо: 1623 Нийтийн

Техник технологийн хөгжлийн үрээр бүхий л зүйл өөрчлөгдөн шинэчлэгдэж байдаг. Энэ үзэгдэл мэдээллийн технологийн салбарт бүр ч илүү хурдтай явдагийг бүгд мэднэ. Иймээс энэ салбарт ажиллаж буй мэрэгжилтэнүүд болон ажиллахаар бэлтгэгдэж байгаа залуусын хамгийн эхний зорилт бол хөгжлөөс хоцрохгүй байх юм. Сүүлийн жилүүдэд javascrip хэл маш хурдацтай хөгжин түүнийг програм зохиох ажилд улам өргөнөөр ашиглах болсон тул хэлийг сурч хөгжилтэй нь хөл нийлүүлэхэд туслах зорилгоор ES6 хэлний циклд шинээр нэмэгдсэн зүйлийн талаар энэ хичээлээр үзье.

Циклийн боломжийг дараах

const array = [1, 2, 3, 4, 5];

массиваар авч үзье. Дээрх массивын элементүүдийг консолд гаргахад өмнө хоёр аргыг ашиглаж болдогийн нэг бол for циклийг

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 78

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 109

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 113

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 131

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 130

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 187

 

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

Нээгдсэн тоо : 132

 

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 127

 

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

Нээгдсэн тоо : 139

 
Энэ долоо хоногт

Арифметик прогрессын ялгавар тэгтэй тэнцүү биш. Энэхүү прогрессын 1-р гишүүнийг 2-р гишүүнээр, 2-р гишүүнийг 3-р гишүүнээр, 3-р гишүүнийг 1-р гишүүнээр үржүүлэхэд гарах тоонууд өгөгдсөн дарааллаар геометрийн прогресс үүсгэдэг бол геометр прогессын хуваарийг ол.

Нээгдсэн тоо : 1343

 

Бөмбөрцөгт багтсан зөв дөрвөн өнцөгт пирамидийн суурь нь бөмбөрцөгийн төвийг дайрч байв. Пирамидийн эзэлхүүн 18-тай тэнцүү бол бөмбөрцөгийн радиусийг ол.

Нээгдсэн тоо : 1473

 

Зөв зургаан өнцөгт пирамидийн апофем h -тэй тэнцүү бөгөөд сууртай үүсгэх хоёр талст өнцөг 600 градус бол пирамидийн бүтэн гадаргуун талбайг ол.

Нээгдсэн тоо : 46