Замените значение в переменной по нажатию Reach JS - PullRequest
Новая
       10

Замените значение в переменной по нажатию Reach JS

0 голосов
/ 28 апреля 2018

Я создаю генератор случайных фильмов, используя API-интерфейс thmdb. При сортировке по жанру API принимает строку всех идентификаторов жанра для исключения, поэтому возвращает результаты по жанру, который мы хотим найти. Я использую axios, чтобы сделать запрос http get.

Я смог вернуть результат один раз, однако, если пользователь решает выбрать другой жанр, он накладывает новую строку поверх старой.

Мое препятствие - вместо того, чтобы накладывать новую строку на существующую, я хочу, чтобы она заменяла содержимое переменной после каждого клика. Любой совет? 

import React, { Component } from 'react';

import axios from 'axios';

import './genres.css';

class genres extends Component {
state = {
    title: [],
    genres: []
}

async componentDidMount() {
    const response = await axios.get('https://api.themoviedb.org/3/genre/movie/list?api_key=34651b29c2c31f97c875d1f83f8f1d6d&language=en-US');
    this.setState({genres: response.data.genres});
    console.log(this.state.genres);
}

render() {
    const genres = this.state.genres.map(genre => {
        return <option key={genre.id} value={genre.id}>{genre.name}</option>
    })
    let sel = document.getElementById('genre_selector')


    let opt = ''
    let array = this.state.genres
    let index = []
    let selOpt = ''
    let toRemove = ''
    let genreFilter = ''

    const genreClickHandler = () => {
        opt = sel.options[sel.selectedIndex]
        selOpt = Number(opt.value)

        for(let i = 0; i < array.length; i++){
            index.push(this.state.genres[i].id)
        }

        toRemove = index.indexOf(selOpt)
        index.splice(toRemove, 1)
        index.join('%')
        genreFilter = index.join('%').toString()

        console.log(genreFilter)            
    }

    const selector = <select 
                        onClick={genreClickHandler} className="custom-select" id="genre_selector">

                            <option>Genres...</option>
                                    {genres}
                    </select>

    return (
        <div className="App">
            {selector}
        </div>
    );
}
}

export default genres;

1 Ответ

0 голосов
/ 28 апреля 2018

Я сделал рабочий пример этого для кодов и ящиков для вас. Надеюсь, это поможет. Удачи в вашем приложении!

Выбор занимает onChange, а не onClick.

https://codesandbox.io/s/w25zwnnw8l

Вот документация по React Selects!

https://reactjs.org/docs/forms.html#the-select-tag

...