1
텍스트를 입력 할 때 배열 (json 데이터)에서 개체를 반환하고 조건 (개체인지 여부에 관계 없음)을 기반으로 검색 기능이 있습니다. 즉 두 가지 다른 구성 요소를 보여줍니다. 일치하는 필드가있는 목록 및 "일치하는 결과가 없습니다"구성 요소반응 js의 반환 값을 기반으로 두 개의 다른 구성 요소 표시
class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
searchTextData: '',
isSearchText: false,
isSearchOpen: false,
placeholderText:'Search Content',
filteredMockData: [],
dataArray: []
};
}
handleSearchChange = (event, newVal) => {
this.setState({ searchTextData: newVal })
if (newVal == '') {
this.setState({ clearsearch: true });
this.setState({
filteredMockData: []
});
this.props.onDisplayCloseIcon(true);
} else {
this.props.onDisplayCloseIcon(false);
searchData.searchResults.forEach((item, index, array) => {
this.state.dataArray.push(item);
});
this.setState({ filteredMockData: this.state.dataArray });
}
}
clearInput =() => {
this.setState({ searchTextData: '' })
}
isSearchText =() => {
this.setState({ isSearchText: !this.state.isSearchText });
}
onSearchClick =() => {
this.setState({ isSearchOpen: !this.state.isSearchOpen });
this.setState({ searchTextData: '' });
this.props.onDisplayCloseIcon(true);
}
renderSearchData =() => {
const SearchDatasRender = this.state.dataArray.map((key) => {
const SearchDataRender = key.matchedFields.pagetitle;
return (<ResultComponent results={ SearchDataRender } />);
})
return SearchDatasRender;
}
renderUndefined =() => {
return (<div className = "search_no_results" >
<p> No Recent Searches found. </p>
<p> You can search by word or phrase, glossary term, chapter or section.</p>
</div>
);
}
render() {
return (<span>
<SearchIcon searchClick = { this.onSearchClick } />
{this.state.isSearchOpen &&
<div className = 'SearchinputBar' >
<input
placeholder={this.state.placeholderText}
className= 'SearchInputContent'
value = { this.state.searchTextData}
onChange = { this.handleSearchChange }
/>
</div>
}
{this.state.searchTextData !== '' && this.state.isSearchOpen &&
<span className='clearText'>
<ClearIcon className='clearIcon' clearClick = { this.clearInput }/>
</span>
}
{this.state.searchTextData !== '' && this.state.isSearchOpen &&
<div className="SearchContainerWrapper">
<div className = "arrow-up"> </div>
<div className = 'search_result_Container' >
<div className = "search_results_title" > <span> Chapters </span><hr></hr> </div>
<div className="search_show_text" >
<ul className ="SearchScrollbar">
{this.state.filteredMockData.length ? this.renderSearchData() : this.renderUndefined() }
</ul>
</div>
</div>
</div>}
</span>
);
}
}
Search.propTypes = {
intl: intlShape.isRequired,
onSearchClick: PropTypes.func,
isSearchBarOpen: PropTypes.func,
clearInput: PropTypes.func,
isSearchText: PropTypes.func
};
export default injectIntl(Search);검색 내 상위 구성 요소이며 내가
class ResultComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render(){
\t console.log(this.props.renderSearchData(),'Helloooo')
return(<p>{this.props.renderSearchData()}</p>)
}
}
ResultComponent.propTypes = {
results: PropTypes.string.isRequired
};내가 오류를 받고 있어요 같은 resultComponent을 보여줄 필요가 일치하는 값을 기준으로 "renderSearchData는 함수가 아닙니다."나는 새로운 반응을 보입니다. 누군가가 도울 수 있기를 바랍니다. . 당신은`this.props.renderSearchData를 사용하는 이유는 ResultComponent 구성 요소에 전달
으로
this.props.renderSearchData()를 교체
ResultComponent에 따라서results입니다 ()'? 이 줄을'this.props.results'로 바꿔라. –
우와 .. 진정해. 정말 고마워. 이 답변을 게시하십시오 upvote 그것을 보자. –
당신은 환영합니다 :) –