Javascript 选中/取消选中复选框时的管理状态-反应
在我的react应用程序中,用户输入关键字并获得结果列表。我正在尝试对这些结果实施过滤器。下面是过滤器的屏幕截图。 这是我的状态Javascript 选中/取消选中复选框时的管理状态-反应,javascript,reactjs,checkbox,react-state-management,react-state,Javascript,Reactjs,Checkbox,React State Management,React State,在我的react应用程序中,用户输入关键字并获得结果列表。我正在尝试对这些结果实施过滤器。下面是过滤器的屏幕截图。 这是我的状态 类SearchResultsPage扩展了React.Component{ 建造师(道具){ 超级(道具); 此.state={ 结果:this.props.location.state.data.results, 关键词:this.props.location.state.data.keyword, pageOfItems:[], 城市:{ “纽约市(NYC)”
类SearchResultsPage扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
结果:this.props.location.state.data.results,
关键词:this.props.location.state.data.keyword,
pageOfItems:[],
城市:{
“纽约市(NYC)”:错误,
"德里":错,,
曼谷:错,,
"巴黎":假,,
"墨西哥城":错
},
主题:{
“环境”:错误,
"罪":假,,
"政治":假,,
"社会动荡":假,,
“基础设施”:错误
},
语言:{
“印地语”:错,
“英语”:错,
"泰文":假,,
“法语”:错,
"西班牙文":错
}
};
this.onChangePage=this.onChangePage.bind(this);
this.onCityChange=this.onCityChange.bind(this);
}
尝试单独实现过滤状态,而不是与结果组合,看看我的解决方案:
import React from 'react';
import NavigationBar from './NavigationBar';
import SearchPageResultsStyle from "../assets/css/SearchResultsPage.css"
import Pagination from './Pagination';
class SearchResultsPage extends React.Component{
constructor(props) {
super(props);
this.state = {
results: this.props.location.state.data.results,
isFiltered: false, //NEW STATE
filteredResults: [], //NEW STATE
keyword: this.props.location.state.data.keyword,
pageOfItems: [],
cities: {
'New York City (NYC)': false,
'Delhi': false,
'Bangkok': false,
'Paris': false,
'Mexico City': false
},
topics: {
'Environment': false,
'Crime': false,
'Politics': false,
'Social Unrest': false,
'Infrastructure': false
},
languages: {
'Hindi': false,
'English': false,
'Thai': false,
'French': false,
'Spanish': false
}
};
this.onChangePage = this.onChangePage.bind(this);
this.onCityChange = this.onCityChange.bind(this);
}
onChangePage(pageOfItems) {
// update local state with new page of items
this.setState({pageOfItems});
}
// setting each city in cities object (city chechboxes which are clicked on UI) to true
onCityChange(e) {
const val = e.target.checked;
const name = e.target.name;
let updatedCities = Object.assign({},this.state.cities,{[name]: val});
this.setState({
cities: updatedCities,
},function () {
const filteredCities = [];
for (let key in this.state.cities) {
if (this.state.cities[key] === true) {
filteredCities.push(key)
}
}
// CHECK IF SHOULD FILTER
if (filteredCities.length > 0) {
const filteredResults = [];
this.state.results.forEach((result) => {
for (let i = 0; i < filteredCities.length; i++) {
if (result.city === filteredCities[i] && result.city != null) {
filteredResults.push(result)
}
}
})
console.log(filteredResults.length)
if (filteredResults.length > 0) {
this.setState({
isFiltered: true,
filteredResults: filteredResults
})
}
} else {
this.setState({
isFiltered: false,
filteredResults: []
})
}
})
}
// rendering checkboxes for topics
renderCityFilter() {
const cities = ['New York City (NYC)','Delhi','Bangkok','Paris','Mexico City']
return cities.map((city,i) => {
return (
<div key={i} className={'city-filters'}>
<input
type="checkbox"
name={city}
onChange={this.onCityChange}
value={this.state.cities[city]}/>
<label key={i} style={{fontSize:12}}>
{city}
</label>
</div>
)
})
}
// rendering checkboxes for topics
renderTopicFilter() {
const topics = ['Environment','Crime','Politics','Social Unrest','Infrastructure']
return topics.map((topic,i) => {
return (
<div key={i}>
<input
type="checkbox"
name={topic}
onChange={this.onCityChange}
value={this.state.topics[topic]}/>
<label key={i} style={{fontSize:12}}>
{topic}
</label>
</div>
)
})
}
// rendering checkboxes for languages
renderLanguageFilter() {
const languages = ['Hindi','English','Thai','French','Spanish']
return languages.map((language,i) => {
return (
<div key={i}>
<input
type="checkbox"
name={language}
onChange={this.onCityChange}
value={this.state.languages[language]}/>
<label key={i} style={{fontSize:12}}>
{language}
</label>
</div>
)
})
}
render() {
const renderItems = this.state.pageOfItems.map((item, index) => {
return (
<div key={index}>
<h3 style={{color: '#1a0dab'}} key={index}>{item.text}</h3>
<a href={'https://google.com'} key={index}>{item.tweetUrl}</a>
<br/>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}} key={index}>topic: </span>{item.topic}</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}} key={index}>city: </span>{item.city}</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}} key={index}>lang: </span>{item.lang}</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}} key={index}>Hashtags: </span></p>
<hr/>
</div>
)
});
return (
<div>
<NavigationBar/>
<h4 style={{textAlign:'center', color:'#1a0dab'}}>Showing search results for <span style={{fontWeight:'bold', fontStyle:'Italic'}}>'{this.state.keyword}'</span></h4>
<hr/>
<div className={'wrap'} style={SearchPageResultsStyle}>
<div className={'fleft'}>
<h4>City</h4>
{this.renderCityFilter()}
<hr/>
<h4>Topics</h4>
{this.renderTopicFilter()}
<hr/>
<h4>Language</h4>
{this.renderLanguageFilter()}
<hr/>
</div>
<div className={'fcenter'}>
{renderItems}
{//CHECK SHOULD RENDER RESULTS OR FILTEREDRESULTS}
<Pagination items={this.state.isFiltered ? this.state.filteredResults : this.state.results} onChangePage={this.onChangePage}/>
</div>
<div className={'fright'}/>
</div>
</div>
)
}
}
export default SearchResultsPage;
从“React”导入React;
从“/NavigationBar”导入导航栏;
从“./assets/css/SearchResultsPage.css”导入SearchPageResultsStyle
从“/分页”导入分页;
类SearchResultsPage扩展React.Component{
建造师(道具){
超级(道具);
此.state={
结果:this.props.location.state.data.results,
isFiltered:false,//新状态
FilteredResult:[],//新状态
关键词:this.props.location.state.data.keyword,
pageOfItems:[],
城市:{
“纽约市(NYC)”:错误,
"德里":错,,
曼谷:错,,
"巴黎":假,,
"墨西哥城":错
},
主题:{
“环境”:错误,
"罪":假,,
"政治":假,,
"社会动荡":假,,
“基础设施”:错误
},
语言:{
“印地语”:错,
“英语”:错,
"泰文":假,,
“法语”:错,
"西班牙文":错
}
};
this.onChangePage=this.onChangePage.bind(this);
this.onCityChange=this.onCityChange.bind(this);
}
onChangePage(pageOfItems){
//使用项目的新页面更新本地状态
this.setState({pageOfItems});
}
//将城市中的每个城市对象(在UI上单击的城市复选框)设置为true
onCityChange(e){
const val=e.target.checked;
const name=e.target.name;
让updatedCities=Object.assign({},this.state.cities,{[name]:val});
这是我的国家({
城市:更新的城市,
},函数(){
常数filteredCities=[];
for(请输入此.state.cities){
if(this.state.cities[key]==true){
filteredCities.push(按键)
}
}
//检查是否应该过滤
如果(filteredCities.length>0){
常量筛选结果=[];
this.state.results.forEach((result)=>{
for(设i=0;i0){
这是我的国家({
是的,
筛选结果:筛选结果
})
}
}否则{
这是我的国家({
isFiltered:false,
筛选结果:[]
})
}
})
}
//呈现主题的复选框
renderCityFilter(){
const cities=[‘纽约市’、‘德里’、‘曼谷’、‘巴黎’、‘墨西哥城’]
返回城市。地图((城市,i)=>{
返回(
{城市}
)
})
}
//呈现主题的复选框
renderTopicFilter(){
const topics=[“环境”、“犯罪”、“政治”、“社会动荡”、“基础设施”]
返回topics.map((topic,i)=>{
返回(
{主题}
)
})
}
//呈现语言的复选框
renderLanguageFilter(){
常量语言=[‘印地语’、‘英语’、‘泰语’、‘法语’、‘西班牙语’]
返回languages.map((语言,i)=>{
返回(
{语言}
)
})
}
render(){
const renderItems=this.state.pageOfItems.map((项,索引)=>{
返回(
{item.text}
主题:{item.topic}
城市:{item.city}
lang:{item.lang}
标签:
)
});
返回(