Програмийн кодчлолийг тусгайлан заалгаж сурдаг зүйл биш. Ямарч зүйлийг өөрөө бие даан сурах боломжтой. Энэ талаар Бие даан сурах нийтлэлийг үзээд эрэгцүүлэн бодоорой. Энэ удаад Input талбарын боловсруулалтын талаар судлая.

Өмнөх хичээлүүдэд хуудасны элементүүдэд үйл явцын сонсогчийг тавин, түүнд параметр дамжуулан хүлээн авах аргуудыг сурсан. Энэ хичээлээр Input талбарт үүссэн үйл явцыг хэрхэн боловсруулахыг судлая. Үүний тулд App компонентийн h1 гарчигийн доор input талбарыг

      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <input type="text"/>
        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>

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

хуудаст мэдээлэл оруулах талбар гарч ирнэ. input талбарт боломжит үйл явцуудыг нэмэх боломжтой. input талбарын өөрчлөлтийн сонсогчийг Jsx -ийн onChange атрибутаар тавин өгдөг. Үүнийг хэрэгжүүлэлт Үйл явц нэмэх хичээлийн Гарчиг өөрчлөх товчинд үйл явцын сонсогч тавьсантай ижил. Кодийг харвал

  ChangeHandle = () => {
    console.log('Input өөрчлөгдсөн')
  }

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

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle}/>

        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>

гэж харагдана. App компонентийн кодийн хэсгийг үзүүлж байгааг анхаарна уу. Эхлээд onChange үйл явцын боловсруулагч ChangeHandle функцийг үүсгээд input талбарын onChange атрибутад ChangeHandle функцийн холбоосыг өгсөн байгаа. Өөрчлөлтийг хадгалаад хуудас дээрх input талбарт ямар нэгэн зүйлийг оруулбал

өөрчлөлт орох бүрд консолд Input өөрчлөгдсөн текстийг үзүүлэх болно. input талбарт оруулсан утгаар h1 гарчигаар үзүүлж буй текстийг сольё гэвэл ChangeHandle функцээс input талбарын утгыг авах хэрэгтэй болно. Үүнийг react -ээс үйл явцын боловсруулагчид автоматаар дамжуулдаг event обьектоос авах боломжтой. event бол javascript -ийн үндсэн обьект. Тэгвэл ChangeHandle функцийн кодийг

  ChangeHandle = (event) => {
    console.log('Event', event)
  }

гэж өөрчлөөд хөтөчийн консолд үзүүлэх event -ийг харвал

түүний target обьектын value талбарт input талбарын утга хадгалагдаж байгаа нь харагдана. Иймээс ChangeHandle функцэд setState аргаар дамжуулан h1 гарчигийн текстийг

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

гэж солих боломжтой. Өөрчлөлтийг хадгалаад хуудсаа нээгээд input талбарт утга оруулбал

h1 гарчигийн текст input талбарт утга өөрчлөгдөх бүрд автоматаар солигдоно. Үүний зэрэгцээ App компонентийн Гарчиг өөрчлөх , Car компонентийн Дарах товчнууд ч хэвийн ажиллахыг шалган үзээрэй.

Зөвлөмж: Хичээл бүрд өмнөх хичээлүүдийн кодийг бүгдийг оруулан ирэх нь хичээлийн материалыг их болгох, давталтыг ихээр үүсгэх муу талтай. Иймээс React JS сан хичээлийн багцыг бүхэлд нь судлахыг зөвлөе.