Узнайте, как использовать Event Listiner 'change' - PullRequest
Новая
       139

Узнайте, как использовать Event Listiner 'change'

0 голосов
/ 09 мая 2020

Я пытался использовать прослушиватель событий change для моего раскрывающегося списка, но список не будет отображаться с тем, что есть в моем исходном файле. Я изучил, что передает эту информацию в файл, здесь они все в порядке операций. this.relationDropdowns.addEventListener('change', this.handleChange) моя функция имеет эти два для листинга событий: 

```let objected = event.target.value```

```let objectType = even.type```

Это одна часть функции с вызовом findMatching (). 

```handleChange = (event) => {
    // this.relationList.innerHTML = `` //clears previous list
    let objectId = event.target.value//event.target.value
    let objectType = event.type //event.type.id
    fetch(this.relationURL)
        .then(res => res.json())
        .then(relationAttributes => this.findMatching(relationAttributes.data, objectId, objectType))
        .then(matchedRelation => matchedRelation.forEach(relation => {
            if(objectType == 'zodiac-dropdowns'){
                let plantRelation = relation.attributes.plant
                this.renderCards(plantRelation, objectId)
            } else if (objectType == 'plant-dropdowns') {
                let zodiacRelation = relation.attributes.zodiac
                this.renderCards(zodiacRelation, objectId)
            }
        }))```

Здесь findMatching ( ) функция принимает параметры. 

```findMatching(relationAttributes, objectId, objectType) {
    let month = objectType.split("-")[0]
    let match = relationAttributes.filter(i => 
        i.attributes[month].id === Number(objectId));// use bracket notations to interpolate here
    return match;
};```.

Ниже приведен рендеринг всех функций. 

``` renderAllZodiacs = () => {
    // this.zodiacDropdowns.innerText = ""
    this.zodiacs = this.zodiacs.filter( function( item, index, inputArray ) {
        return inputArray.indexOf(item) == index;
    }); //dupes array 
    this.zodiacs.forEach(zodiac => {
        this.zodiacDropdowns.innerText += `<option value="${zodiac.id}">${zodiac.id.name}</option>`
    })
}```

и 

```renderAllPlants = () => {
    // this.plantDropdowns.innerText = ""
    this.plants = this.plants.filter( function(item, index, inputArray ) {
        return inputArray.indexOf(item) == index;
    }); //dedupes array
    this.plants.forEach(plant => {
    this.plantDropdowns.innerText += `<option value="${plant.id}">${plant.id.name}</option>`
    })
}```
...