Как отфильтровать массив из состояния onChange на основе категории и вернуться к значению по умолчанию? - PullRequest
Новая
       13

Как отфильтровать массив из состояния onChange на основе категории и вернуться к значению по умолчанию?

0 голосов
/ 12 июня 2019

Для моего компонента на базе классов у меня есть state объект , который содержит определенный массив с именем movies.У меня также есть функция handleMoviesFilter, которая называется onChange для тега select.

Как я могу динамически фильтровать опции из моего массива, фильтровать их поChange .. и возвращаться, когда я выбираю другуюфильм? 

state = {
    movies: [
        {
            name: 'Goodfellas',
            category: 'crime'
        },

        {
            name: 'Saving private ryan',
            category: 'war'
        },
        {
            name: 'The Shawshank Redemption',
            category: 'drama'
        }
    ]
}

handleMoviesFilter = e => {
    let currentMovie = e.target.value;

    const updateMoviesState = this.state.movies.filter(({ category }) =>
        currentMovie.includes(category)
    );

    this.setState({
        opleidingen: updateMoviesState,
        isResetButtonActive: true,
    });
}

<select id="lang" onChange={this.handleMoviesFilter}>
    <option value="select">Select</option>
    <option value="Goodfellas">Goodfellas</option>
    <option value="Saving private ryan">Saving private ryan</option>
    <option value="The Shawshank Redemption">The Shawshank Redemption</option>
</select>

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

Вы хотите, чтобы

  • получили выбранное значение
  • заглавными буквами все его символы с toUpperCase()
  • фильтр state для получения фильмов, которые включают выбранное значение в его имя
    • фильтр и включает в себя используемый метод 
state = {
    movies: [
        {
            name: 'Goodfellas',
            category: 'crime'
        },

        {
            name: 'Saving private ryan',
            category: 'war'
        },
        {
            name: 'The Shawshank Redemption',
            category: 'drama'
        },
        {
            name: 'Good Riddance',
            category: 'drama'
        }
    ]
}

handleMoviesFilter = e => {
    let currentMovie = e.target.value.toUpperCase();


    //const updateMoviesState = this.state.movies.filter(movie => movie.name.toUpperCase() === currentMovie);

    const updateMoviesState = this.state.movies.filter(movie => movie.name.toUpperCase().includes(currentMovie));
    this.setState({
        movies: updateMoviesState,
        isResetButtonActive: true,
    });
}

<select id="lang" onChange={this.handleMoviesFilter}>
    <option value="select">Select</option>
    <option value="Goodfellas">Goodfellas</option>
    <option value="Saving private ryan">Saving private ryan</option>
    <option value="The Shawshank Redemption">The Shawshank Redemption</option>
</select>

Test It Out

Этот фрагмент был создан, чтобы вы могли проверить его. Это, конечно, НЕ включает фреймворк Reaction-JS . 

const state = {
    movies: [
        {
            name: 'Goodfellas',
            category: 'crime'
        },

        {
            name: 'Saving private ryan',
            category: 'war'
        },
        {
            name: 'The Shawshank Redemption',
            category: 'drama'
        },
        {
            name: 'Good Riddance',
            category: 'drama'
        }
    ]
}

handleMoviesFilter = e => {
    // get requested movie
    let currentMovie = document.getElementById('textField').value.toUpperCase(); // t
    console.log("Requested Movie:", currentMovie);
    
    // array has a movie that equals selected movie
    //const updateMoviesState = state.movies.filter(movie => movie.name.toUpperCase() === currentMovie);

    // array has a movie whose name contain the phrase 
    const updateMoviesState = state.movies.filter(movie => movie.name.toUpperCase().includes(currentMovie));

    console.log("Filter Result:", updateMoviesState);
}
<input id="textField"></input>
<button onclick="handleMoviesFilter(event)">Filter</button>
0 голосов
/ 12 июня 2019

Если то, что вы пытаетесь выполнить, основано на выбранной опции, отфильтруйте state.movies и верните те, в которых совпадают, тогда вы захотите сделать что-то вроде следующего ... 

state = {
    movies: [
        {
            name: 'Goodfellas',
            category: 'crime'
        },

        {
            name: 'Saving private ryan',
            category: 'war'
        },
        {
            name: 'The Shawshank Redemption',
            category: 'drama'
        }
    ]
}

handleMoviesFilter = e => {
    let currentMovie = e.target.value;

    const updateMoviesState = this.state.movies.filter(movie => movie.name.toLowerCase() === currentMovie.toLowerCase());

    this.setState({
        movies: updateMoviesState,
        isResetButtonActive: true,
    });
}

<select id="lang" onChange={this.handleMoviesFilter}>
    <option value="select">Select</option>
    <option value="Goodfellas">Goodfellas</option>
    <option value="Saving private ryan">Saving private ryan</option>
    <option value="The Shawshank Redemption">The Shawshank Redemption</option>
</select>
...