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

Теперь мне нужно еще два варианта: отсортировать фильмы по году или по идентификатору и отфильтровать с помощью строки поиска выше.

Как это можно сделать в компоненте?

Вот мой код:

import React, { Component } from 'react';
import './App.css';

class StarWarsApp extends React.Component{
    constructor(props){
        super(props);
        this.handleSort = this.handleSort.bind(this);
        this.handleMovies = this.handleMovies.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            movies: [],
            crawl: ['No movie selected']
        }

        this.handleMovies();
    }

    handleMovies(){
        fetch('"https://swapi.co/api/films"').then(results => {
            return results.json();
        }).then(data => {

            let movies = data.results;
            console.log(movies);
            this.setState(() => {
                return{ 
                    movies: movies 
                }
            })
        })
    }

    handleClick(event){
        fetch('https://swapi.co/api/films'+event.currentTarget.id).then(results => {
            return results.json();
        }).then(data => {
            let crawl = data.results.opening_crawl;
            this.setState(() => {
                return{ 
                    crawl:crawl 
                }
            })
        })
    }

    render(){
        const title = 'Star Wars';
        return(
            <div>
                <Header title={title}/>
                <Sort  handleSort={this.handleSort}/>
                <Movies handleClick={this.handleClick} movies={this.state.movies}/>
                <Crawl crawl={this.state.crawl}/>
            </div>
        )
    }
}   


class Header extends React.Component{
    render(){
        return(
            <div>
                <h1>{this.props.title}</h1>
            </div>
        )
    }
}

class Movies extends React.Component{
    render(){
        return(
            this.props.movies.map((movie) => 
            <div onClick={this.props.handleClick} id={movie.episode_id} key={movie.episode_id}>
                {
                <p><Movie title={movie.title}/></p> 
                }
            </div>
            )
        )
    }
}

class Movie extends React.Component{
    render(){
        return(
            <div>{this.props.title}</div>
        )
    }
}

class Crawl extends React.Component{
    render(){
        return(
            <div className="split right">
                {this.props.crawl}
            </div>
        )
    }
}


export default StarWarsApp;
1
Danae 4 Дек 2018 в 01:56

1 ответ

Лучший ответ

Ваша функция сортировки по ручке должна быть примерно такой:

handleSort = () => {
  let copyOfMovies = this.state.movies.slice();
  const sortedMovies = movies.sort((a,b) => {
    const nameA = a.name.toUpperCase(); // ignore upper and lowercase
    const nameB = b.name.toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0;
  });
  this.setState({movies:sortedMovies})
}
2
Kleo 3 Дек 2018 в 23:14