javascript - 如何使用 ReactJs 实现 `Search box` 到 `props items`

Question

我想从我的 props 数据集实现搜索框。我尝试关注这篇文章https://dev.to/iam_timsmith/lets-build-a-search-bar-in-react-120j但我想我犯了一些愚蠢的错误。任何纠正我的错误的帮助都会对我有帮助。

//allbook.js

    class AllBook extends Component {
    constructor(props){
        super(props);
        this.state = {
            search : ""
        }

    }
    updateSearch(e){
        this.setState({search: e.target.value.substr(0, 20)});
    }

    render(){
        let filteredBooks = this.props.posts.filter(
            (posts) => {
                return posts.title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
            }
        );
        return(
            <div>
                {Object.keys(filteredBooks).length !== 0 ?  <h1 className="post-heading">All books</h1> : <h1 className="post-heading">No Books available</h1>}  {/*To check if array is empty or not*/}


                {Object.keys(filteredBooks).length !== 0 ?
                <input className="post-heading" type="text" value={this.state.search} onChange={this.updateSearch.bind(this)}/> : ""}

                {/*Arrow function to map each added object*/}
                {filteredBooks.map((post) =>(

                    <div key={post.id}>

                        {post.editing ? <EditComponent post={post} key={post.id}/> :
                            <Post key={post.id} post={post}/>}
                    </div>
                ))}

            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return{
        posts: state
    }
}
export default connect(mapStateToProps)(AllBook); 

Answer 1

您更新的代码似乎非常接近。我认为您在使用 indexOf() 时可能会遇到问题，因为它只能找到字符串(标题)中单个字符的索引。这对于多字符搜索(例如完整单词)不利。

尝试使用.includes()，这样您至少可以搜索完整的单词和标题。它本质上是 .indexOf()

的更好版本

请参阅沙箱例如:https://codesandbox.io/s/silly-currying-3zpvk

工作代码:

    class AllBook extends Component {
    constructor(props){
        super(props);
        this.state = {
            search : ""
        }

    }
    updateSearch(e){
        this.setState({search: e.target.value.substr(0, 20)});
    }

    render(){
        let filteredBooks = this.props.posts.filter(
            (posts) => {
                return posts.title.toLowerCase().includes(this.state.search.toLowerCase());
            }
        );
        return(
            <div>
                {Object.keys(filteredBooks).length !== 0 ?  <h1 className="post-heading">All books</h1> : <h1 className="post-heading">No Books available</h1>}  {/*To check if array is empty or not*/}


                {Object.keys(filteredBooks).length !== 0 ?
                <input className="post-heading" type="text" value={this.state.search} onChange={this.updateSearch.bind(this)}/> : ""}

                {/*Arrow function to map each added object*/}
                {filteredBooks.map((post) =>(

                    <div key={post.id}>

                        {post.editing ? <EditComponent post={post} key={post.id}/> :
                            <Post key={post.id} post={post}/>}
                    </div>
                ))}

            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return{
        posts: state
    }
}
export default connect(mapStateToProps)(AllBook);