Референс

ReactDOM элементэд хандах бас нэгэн боломжийн талаар авч үзье. Энэ боломжийг референс гэдэг бөгөөд та өөр фреймворкуудыг судлаж байсан бол мэдэх байх. Референс React -д хэрхэн ажилладаг ямар хэрэгтэйг харцгаая. Машинуудын жагсаалтыг үзүүлэх Car компонент машины мэдээллийг үзүүлэхдээ түүний нэрийг өөрчлөх input элементийг агуулж байгаа. Тэгвэл Car компонент машины мэдээллийг үзүүлэхэд жагсаалтын аль нэгэн элемент дээр фокус буюу сонголт хийгдсэн байх асуудлыг шийдэх гэе. Үүнийг хэрхэн хэрэгжүүлэх вэ? гэвэл үнэн хэрэгтээ сонголт хийгдэх элементийг DOM -оос аваад түүнд focus аргыг хэрэглэх юм.

Үүнийг react референсээр

class Car extends React.Component {
  componentDidMount() {
    this.inputRef.focus();
  }
  render() {
    ...

    return (
      <>
        ...
        <input
          ref={(inputRef) => (this.inputRef = inputRef)}
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(" ")}
        />
        ...
      </>
    );
  }
}

гэж хэрэгжүүлье. Кодод машиний нэрийг оруулах input элементэд ref={(inputRef) => (this.inputRef = inputRef)} гэсэн хуудаст харагдахгүй ч JSX ойлгох шинэ атрибутийг нэмсэн. Атрибутийн утгаар эргэн дуудалтын /callback/ функцийг тодорхойлсон. Функцэд ирэх inputRef параметрт классаас хандах боломжтой болгохын тулд this.inputRef -д олгосон байгаа. Класст inputRef -тэй ажиллахын тулд DOM -д компонент байршуулсны дараа ажиллах componentDidMount аргад референсэд хандан /this.inputRef.focus()/ түүний focus аргыг дуудсан. Төслийг ажлуулаад машиний жагсаалтыг нээвэл

Сүүлийн машиний нэрийг солих input элемент дээр focus ажиллан элементийг идэвхижүүлнэ. Машиний жагсаалт нээгдэхэд дурын элементийг идэвхижүүлье гэвэл App компонентоос Car компонентийн дуудалтад

         ...
            <Car
              name={car.name}
              year={car.year}
              index={index}
              onDelete={this.deleteHandler.bind(this, index)}
              onChangeName={(event) =>
                this.onChangeName(event.target.value, index)
              }
            />
        ...

index={index} шинжийг дамжуулаад Car компонентийн componentDidMount аргад шинжийн утга хэрэгтэй input -ийн дугаартай тохирч байвал

  componentDidMount() {
    if (this.props.index === 0) {
      this.inputRef.focus();
    }
  }

түүнд focus аргыг дуудах байдлаар хэрэгжүүлж болно. Car компонентийн шинжүүдийн төрлийн обьектод тоон төрлийн index шинжийг нэмэн оруулан

Car.propTypes = {
  name: PropTypes.string.isRequired,
  year: PropTypes.number,
  index: PropTypes.number,
  onChange: PropTypes.func,
  onDelete: PropTypes.func,
};

өгөөрэй. Одоо машиний жагсаалтыг нээвэл эхний input элемент дээр focus ажиллан элементийг идэвхижүүлнэ.
DOM элементэд референсээр хандах шаардлага бага гардаг ч компонентод ямар нэгэн нэмэлт код буюу plugin -ийг багцлан оруулан ирэх үед ихээр ашигладаг. plugin -ууд голдуу хуудас дээрх DOM элементүүдтэй ихээр ажилладаг. Референсээр дамжуулан тодорхой обьектод хандан түүнийг plugin -д дамжуулан өгнө. Үүний классик жишээ бол jquery -д элементийг дамжуулах. React -ийг jquery -тэй хослуулан ашиглах шаардлага бага ч plugin -уудад DOM элементэд хандах шаардлагатай үед референс гарцаагүй хэрэгтэй.
React 16 -гаас эхлэн референсийг

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    if (this.props.index === 0) {
      this.inputRef.current.focus();
    }
  }
  render() {
    ...

    return (
      <>
        ...
        <input
          ref={this.inputRef}
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(" ")}
        />
        ...
      </>
    );
  }
}

арай өөрөөр дамжуулах боломжтой болсон. Кодод орсон өөрчлөлт бол классийн байгуулагч (constructor) функцийг тодорхойлоод түүнд React -ийн createRef аргаар локал референсийг үүсгэн өгсөн. Манай класс React -ийн Component классаас удамшаад өөрийн байгуулагч аргатай болсон тул super аргаар суурь классийн байгуулагчийг дуудах ёстой. Байгуулагчид үүсгэн өгсөн референсээр элементэд хандахын тулд эргэн дуудалтын функц ашиглахгүйгээр ref={this.inputRef} гэж хандана. Локал референсээр элементэд хандахдаа референсийн current обьектоор дамжин түүний аргыг this.inputRef.current.focus() дуудна. Өөрчлөлтийг хадгалаад програмийн ажиллагааг шалгавал бүх зүйл хэвийн ажиллана. Туршаад үзээрэй.
Локал референсийг тусгай зорилгоор ашигладаг тул та current обьектоор дамжуулан элементэд javascript -ээр хийдэг шиг суурь удирдлагыг хийх хэрэггүй. Жишээ нь this.inputRef.current.style.background = 'red' гэх мэтээр. Үүний оронд элементийг удирдах React -ийн олон боломжууд ашиглах нь илүү.

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

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

Формийн шалгалтын ажиллагаануудтай үргэлжлүүлэн танилцая. Валидаторийг тохируулах хичээлийн жишээнд $v обьектод байгаа email түлхүүртэй обьектийг дэлгэц дээр харуулан цахим шуудангийн хаягийн талбарт оруулж буй өгөгдлүүд шалгагчийн төлөвт хэрхэн нөлөөлж байгааг ажигласан. Бодит жишээнд {{ $v.email }} бүтцийг ашиглаад байх нь тохиромжгүй тул түүнийг шаблоны кодоос

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
        <label for="email">Email</label>
        <input
          type="email"
          id="email"
          class="form-control"
          @blur="$v.email.$touch()"
          v-model="email"
        >
      </div>
    </form>
  </div>
</template>

хасаад хуудсаа хөтөч дээр нээвэл

ердийн формийг үзүүлнэ.

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

html хуудас бүхэлдээ DOM /document object model/ буюу хуудасны обьектын моделоос бүрддэг. Хуудас дээрх элементүүдэд хандан тэдгээрийг удирдах асуудал хэрэглэгч талын хуудастай ажиллах ажиллагаанд чухал байр суурийг эзэлдэг. Иймээс VueJs -ээр html хуудасны элементүүдэд хэрхэн хандахыг авч үзье. Html элементүүдэд хандах ref буюу reference гэдэг бүтэц бий. Хичээлд

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="updateFirstTitle">Гарчиг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue -гийн хувь'
                },
                methods: {
                    updateFirstTitle(){
                        this.title = "Шинэ гарчиг"
                    }
                }
            })
        </script>        
    </body>

h2 гарчиг түүний утгыг солих Гарчиг өөрчлөх товч бүхий хуудсыг ашиглана. Гарчиг өөрчлөх товчийг дарахад title хувьсагчийн утгыг Шинэ гарчиг болгон өөрчлөх updateFirstTitle функц дуудагдана. Хуудасны ажиллагааг шалган үзээрэй.

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

Хичээлээр компонент ирж буй параметрүүдэд шалгалт хийх боломжийн авч үзье. Төслийн App компонентоос Car компонентийг дуудаж буй кодийг

    ...
            <Car
              name={car.name}
              year={car.year}
              onDelete={this.deleteHandler.bind(this, index)}
              onChangeName={(event) => this.onChangeName(event.target.value, index)}
            />
    ...

аваад үзье.

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

Өмнөх хичээлүүдэд бид хоёр хуудсыг үүсгээд тэдгээрт шилжих чиглүүлэгчийг (router) тохируулаад байгаа. Энэ удаад динамик чиглүүлэгчийг хэрхэн хэрэглэхийг авч үзье. Үүний тулд дараах тохиолдлыг авч үзье. Програмын Cars хуудаст машинуудын жагсаалтыг үзүүлэхээр болгон

<template>
  <div>
    <h1>Cars page</h1>
    <ul>
      <router-link
        tag="li"
        v-for="car in 5"
        :to="'/car/' +car"
        :key=car
      >
        <a>Car {{car}} </a>
      </router-link>
    </ul>
  </div>
</template>

гэж өөрчилье.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

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

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэл бод.

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

 

тэгшитгэл бод.

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

 

Зурагт өгөгдсөн дотоод байдлаараа шүргэлцсэн хоёр тойргийн TA нь ерөнхий шүргэгч, TC нь том тойргийн огтлогч, жижиг тойргийн шүргэгч болно. DC=3, CB=2 бол TA -г ол.

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