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

Question

对于我的基于 class 的组件，我有一个 state 对象，其中包含一个名为 movies 的已定义数组。我还有一个 handleMoviesFilter 函数，在 select 标签上称为 onChange。

如何从我的数组中动态过滤选项，在更改时过滤它们...并在我选择另一部电影时恢复？

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

如果你想要完成的是基于所选的选项，过滤匹配的 state.movies 和 return 那些，那么你会想要做如下的事情......

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

你会想要

获取选择的值
大写所有字符都带有toUpperCase()
filter state 获取包含所选值的电影 name
- 过滤并包含使用的方法

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>

测试一下

制作此代码段是为了让您可以对其进行测试。 这当然不包括react-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>

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

How to Filter array from state onChange based on category and revert to default?

javascript

reactjs

react-select

测试一下