0

使用父组件中的文本字段，我想过滤多个子组件，其中字符串正在通过道具传递。子组件已通过 map 函数输出，该函数也将数据从 API 导入到道具中。在作为道具传递给孩子（searchTerm）后，我有用户输入控制台日志记录。我的问题是我无法根据用户的输入隐藏单个组件的显示。我遇到的麻烦是，当一个人决定隐藏自己时——他们都会这样做。我试过 indexOf 并发现 include() 更有用。我很担心我解决这个问题的方法，并希望从经验更丰富的 React 开发人员那里获得一些智慧。

//父组件

render() { 

    return ( 
    <React.Fragment>

        <input type="text" className = {styles.searchField} id="searchField" placeholder = "Search..." onChange = {this.getUserInput}/>

            <div className={styles.container}>
                {this.state.importedBooks.map((element, index) => (
                    <Tile key ={index} searchTerm ={this.state.searchTerm} buy ={element.amazon_product_url} 
                    img ={element.book_image} summary ={element.description} url={element.book_image} 
                    book_author ={element.author} book_title ={element.title} />
                ))}      
            </div> 

    </React.Fragment>);
}

}

//子组件

类瓷砖扩展 React.Component {

public state:{display:boolean} = {display:true};

public getContainerContent = () => {

    const containers: NodeListOf<Element> | null = document.querySelectorAll("#container");

    containers.forEach(element => {
    if (element.innerHTML.toLocaleLowerCase().includes(this.props.searchTerm) !== false) {
        this.setState({display:true});
    }
    else if (this.props.searchTerm == "") {
        this.setState({display:true});
    }
    else {
        this.setState({ display: false });
    }
})

};

public componentWillReceiveProps = () => {
    this.getContainerContent();
}

render() { 
    const renderContainer = this.state.display ? styles.container : styles.hideDisplay; 

    return ( 
    <div className={styles.container} id="container">
        <h1>{this.props.book_title}</h1>
        <h2>{this.props.book_author}</h2>
        <a href={this.props.buy} target="_blank"><img src = {this.props.img} alt="book cover"/></a>
        <p>{this.props.summary}</p>
        <a href={this.props.buy} target="_blank">Purchase</a>
    </div> );
}

}

4

1 回答 1

0

我认为问题源于getContainerContent您的子组件中的方法。
为什么单个子组件会关注属于其他子组件的数据？

解决此问题的一种方法是首先在父组件中声明，在显示子组件时，您将要匹配过滤器的道具。
然后，您可以遍历这些声明的 props 并决定组件是否应该显示子组件。

// parent comp
private shouldDisplayElement (element, searchTerm: string): boolean {
    const propsToMatchFiltersAgainst = ['book_title', 'book_author', 'buy', /* etc... */];

    let shouldDisplay = false;

    for (const p of propsToMatchFiltersAgainst) {
        if (`${element[p]}`.toLowerCase().includes(searchTerm.trim())) {
            shouldDisplay = true;
        }
    }

    return shouldDisplay;
}

// parent's render fn
<div className={styles.container}>
    {this.state.importedBooks.map((element, index) => (
        this.shouldDisplayElement(element, this.state.searchTerm)
            ? <Tile 
                key={index} 
                buy={element.amazon_product_url}
                img={element.book_image} 
                summary={element.description} 
                url={element.book_image}
                book_author={element.author} book_title={element.title} 
            />
            : null
    ))}
</div>

这样，鉴于当前情况，您不再需要getContainerContent在子组件中使用该方法。

于 2019-06-24T09:05:46.870 回答