Как обновить веб-страницу на основе выбора из выпадающего списка? - PullRequest
Новая
       0

Как обновить веб-страницу на основе выбора из выпадающего списка?

0 голосов
/ 02 июня 2018

У меня есть веб-страница, на которой отображается список фильмов из API.Как вы можете видеть в моем коде, прямо под методом рендеринга у меня есть три закомментированных метода сортировки, которые прекрасно работают, когда я раскомментирую один из методов, он выполняет сортировку, как и предполагалось.

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

Я думал, что onClick на одну из опций сделает это, но она не работает.Сейчас я думаю, что это как-то связано с отображенным контентом, который я показываю на странице при загрузке, но я не совсем уверен.

Вот мой код: 

import React, {Component} from "react";
import {connect} from "react-redux";
import {crimeGenre} from "./redux";

class CrimeGenre extends Component {
    constructor(){
        super();
    }

    componentDidMount(){
        this.props.crimeGenre();
    }

    sortAlpha = () => {
        return this.props.select && this.props.select.sort((a, b) => {
            a.title < b.title ? -1 : 1;
        });
    }

    render(){
        // this.props.select && this.props.select.sort((a, b) => {
        //     return a.title < b.title ? -1 : 1;
        // });

        // this.props.select && this.props.select.sort((a, b) => {
        //     return a.vote_average > b.vote_average ? -1 : 1;
        // });

        // this.props.select && this.props.select.sort((a, b) => {
        //     return a.popularity > b.popularity ? -1 : 1;
        // });
        const mappedSelected = this.props.select && this.props.select.map((film, i) => { 
            return (
                <div>
                    <h1>{film.title}</h1>
                    <img src={`http://image.tmdb.org/t/p/w185${film.poster_path}`}/>
                    <p>Avg. User Score: {film.vote_average}</p>
                </div>
            )
        })

        return(
            <div>
            <select>
                <option onClick={this.sortAlpha}>Alphabetically</option>
                <option>User Score</option>
                <option>Popularity</option>
            </select>
                {mappedSelected}
            </div>
        )
    }
}

export default connect(state=> state, {crimeGenre})(CrimeGenre);

ОБНОВЛЕНИЕ: ЗДЕСЬ МОЙ ТЕКУЩИЙ КОД 

import React, {Component} from "react";
import {connect} from "react-redux";
import {crimeGenre} from "./redux";

class CrimeGenre extends Component {
    constructor(){
        super();

        this.state = {
            value: "alphabetically"
        }
    }

    componentDidMount(){
        this.props.crimeGenre();
    }

    sortFilms = (event) => {
        this.setState({
            value: event.target.value
        })
        if(this.state.value === "alphabetically"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.title < b.title ? -1 : 1;
            });
        }else if(this.state.value === "score"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.vote_average > b.vote_average ? -1 : 1;
            });
        }else if(this.state.value === "popularity"){
            return this.props.select && this.props.select.sort((a, b) => {
                return a.popularity > b.popularity? -1 : 1;
            });
        }
    }

    render(){
        const mappedSelected = this.props.select && this.props.select.map((film, i) => { 
            return (
                <div key={i}>
                    <h1>{film.title}</h1>
                    <img src={`http://image.tmdb.org/t/p/w185${film.poster_path}`}/>
                    <p>Avg. User Score: {film.vote_average}</p>
                    <p>Popularity Index: {film.popularity.toFixed(0)}</p>
                </div>
            )
        })

            return(
                <div>
                <form>
                    <label>
                        Sort By:
                        <select value={this.state.value} onChange={this.sortFilms}>
                            <option id="alphabetically" value="alphabetically">Alphabetically</option>
                            <option id="score" value="score">User Score</option>
                            <option id="popularity" value="popularity">Popularity</option>
                        </select>
                    </label>
                </form>
                    {mappedSelected}
                </div>
            )
        }
    }

export default connect(state=> state, {crimeGenre})(CrimeGenre);

1 Ответ

0 голосов
/ 03 июня 2018

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

import React, {Component} from "react";
import {connect} from "react-redux";
import {crimeGenre} from "./redux";

class CrimeGenre extends Component {
    constructor(props){
        super(props);

        // Do not use component's STATE if you are using REDUX, use redux state container
        this.state = {
            value: "alphabetically"
        };
    }

    componentDidMount(){
        this.props.crimeGenre();
    }

    setOrder = (event) => {
        const value = event.target.value; // Save static value here, event may change
        this.setState({value}); // Asynchronous, `this.state.value` is not updated yet
    }

    render(){
        let mappedSelected = [];

        if (this.props.select) {
            // `this.state.value` is now updated, sort `props` accordingly
            switch (this.state.value) {
            case "alphabetically":
                this.props.select.sort((a, b) => (a.title < b.title ? -1 : 1));
                break;
            case "score":
                this.props.select.sort((a, b) => (a.vote_average > b.vote_average ? -1 : 1));
                break;
            case "popularity":
                this.props.select.sort((a, b) => (a.popularity > b.popularity? -1 : 1));
                break;
            }

            mappedSelected = this.props.select.map((film) => { 
                return (
                    // Never use index as key
                    <div key={film.poster_path}>
                      <h1>{film.title}</h1>
                      <img src={`http://image.tmdb.org/t/p/w185${film.poster_path}`}/>
                      <p>Avg. User Score: {film.vote_average}</p>
                      <p>Popularity Index: {film.popularity.toFixed(0)}</p>
                    </div>
                );
            });
        }

        return(
            <div>
              <form>
                <label>
                  Sort By:
                  <select value={this.state.value} onChange={this.setOrder}>
                    <option id="alphabetically" value="alphabetically">Alphabetically</option>
                    <option id="score" value="score">User Score</option>
                    <option id="popularity" value="popularity">Popularity</option>
                  </select>
                </label>
              </form>
              {mappedSelected}
            </div>
        );
    }
}

export default connect(state=> state, {crimeGenre})(CrimeGenre);

Последний пункт, который нужно решить, это то, что вы используете Redux.Вот чистое решение React.Если это все еще возможно, я рекомендую вам дать себе некоторое время, чтобы понять React, прежде чем вы начнете интегрировать Redux.

...