如何根据类别从状态onChange过滤数组并恢复为默认值？

Question

For my class based component, I have a state object that contains a defined array named movies . I also have a handleMoviesFilter function, that is called onChange on the select tag.

How can I filter the options dynamically from my array, filter them onChange.. and revert when I pick another movie?

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>

Answer 1

If what you are trying to accomplish is based upon the selected option, filter the state.movies and return those in which match, then you would want to do something like the following...

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>

Answer 2

You would want to

• get the selected value
• uppercase all of it's characters with toUpperCase()
• filter state to get the movies that includes the selected value in it's name
  • filter & includes method used

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

This snippet was made so you can test it out. This does NOT include react-js framework of course .

 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>