Үйл явц нэмэх

Төлөв үүсгэх хичээлд 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 функцэд гарчигийг солих ажиллагааны логикийг дараагийн хичээлээс үзээрэй.

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

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

Өмнөх Компонент гэж юу болох хичээлд бид react дээр програмийн кодийг бичихдээ react -ийг index.html файлд оруулан ирэн шууд ашигласан. Програмийн кодийг нэг файлд бүгдийг бичих, кодийг шалгах ажиллагаа, jsx -ийн компиляцийг хийхдээ babel санг нэмэлтээр оруулан ирэх зэрэг нь тийм сайн практик биш тул програм үүсгэх ажиллагааг автоматжуулсан хэрэгслийг react -ийг бүтээгчид боловсруулсан. Дурын хайлтын /жишээ нь google/ системээр create react app мөрийг хайлгавал хэрэгслийг эхний мөрүүдэд олон ирнэ.

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

JavaScript-ийн өгөгдлийн төрлүүд

Хувьсагч гэдэг нь компьютерын санах ойд хадгалагдаж байгаа тодорхой утгыг заах нэр юм. JavaScript –д зарлаж байгаа хувьсагчийн төрлийг урьдчилан заах хэрэггүй хэл хувьсагчийн төрлийг өөрөө тодорхойлдог. Бүхэл болон бутархай тоонуудад илт ялгагдах ялгаа бараг байхгүй. JavaScript доорх төрлүүдийг таньдаг.

Төрөл Нэр Тодорхойлолт
Number Тоо 16, 10, 8 тооллын системийн бүхэл, бутархай тоонууд
String Мөр Хашилтанд байх тэмдэгтүүд
Boolean Логик True ба False байх логик утгууд
Function Функц Функцын холбоос
Object Обьект Обьект , массив болон Null утгатай хувьсагчид

  Нээгдсэн тоо: 2208 Төлбөртэй

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

Үйл явдлын төрөл

Үйл явдлын төрлийг Event обьектын type шинжээр мэдэж болно. Доорх кодод боловсруулагч onclick ба onmouseout үйл явдал үүсэхэд төрлийг тодорхойлж байгаа юм. Энэ бол хөтөч хоорондын зөрчлийг арилгасан шийдэл.

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

Vue фреймворкийн ээлжит хичээлээр форм дээрх тоон утгын талбаруудад v-model директивийг яаж ашиглахыг үзье. Жишээ нь форм дээрээс хэрэглэгчийн насыг авах хэрэгтэй болсон гэе. Үүний тулд

<template>
  <div>
    <h2>Form inputs</h2>
    <input type="text" v-model="age">
    <hr>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      age: 20
    }
  }
}
</script>

код байхад болох мэт.

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

Нээгдсэн тоо : 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