问题：
选中/未选中复选框时管理状态-反应
夏侯弘量
这是我的状态
class SearchResultsPage extends React.Component{
constructor(props) {
super(props);
this.state = {
results: this.props.location.state.data.results,
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);
}我试图做的是，每当选中或未选中复选框时，我将相应的复选框设置为true/false。根据每个复选框的这个布尔值，我过滤出结果，然后在UI上呈现它。当单击复选框时，我能够筛选结果，但当未选中复选框时，我无法显示所有结果。当复选框发生更改时，我就是这样处理的。
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)
}
}
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({
results: filteredResults
})
}
})
}我知道我没有正确地处理状态，在这种情况下我能做什么。为了更好地参考，这里是完整的搜索结果代码。
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,
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)
}
}
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({
results: 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}
<Pagination items={this.state.results} onChangePage={this.onChangePage}/>
</div>
<div className={'fright'}/>
</div>
</div>
)
}
}
export default SearchResultsPage;共有1个答案
芮安顺
尝试单独实现过滤状态，而不是与结果结合使用，看看我的解决方案：
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;
类似资料：
-
问题内容： 我有一个列表视图，大约有200个项目，我为复选框实现了一个自定义ArrayAdapter。我使用SparseBooleanArray来存储盒子的值。 所有这些工作正常，但我似乎无法以图形方式更新复选框的检查。如果用户单击，则选中该框。但是，如果我在代码中调用setChecked，则它对框本身没有影响（因此，即使其值为true，也不会对其进行打勾）。 我通过尝试将所有框都设置为true并
-
问题内容： 通过某种方式，通过Angular的魔力，如果您使用并提供一个布尔值，则如果布尔值是true，则您的复选框将被选中，如果布尔值是true，则未选中。 尽管仅此一项就让人感到莫名其妙，但我实际上是在尝试反转选中状态，因为与todo示例不同，后者意味着选中了复选框，而我的模型更像。 不幸的是，我的第一个猜测没有用： 我所处的位置已经决定了模型，因此我无法更改它，也不必在客户端上对其进行按摩（
-
如果我打开活动，复选框始终保持选中状态，即使我取消选中它并离开活动或关闭应用程序，在重新启动活动后，它也将保持选中状态。 我已尝试使用以下代码段保存活动的状态。 复选框应始终处于用户离开它的状态（选中或未选中）。
-
我试图创建一个表单，该表单顶部有一个复选框，当用户选中该复选框时，它会选择其他特定的复选框，但不是所有复选框。我很难通过反复试验或搜索找到答案。我唯一能找到的就是“全选”选项。不是我想要的。 理想情况下，当用户选中“管理包”旁边的复选框时，我想要“Chrome外观组”和“远程启动” 下面是代码和我在这方面的基本尝试，但它不起作用。提前谢谢。 超文本标记语言： Javascript 我不知道这个Ja
-
我们使用的是Vaadin 8，我们有一个多选网格。在标题中有一个复选框，用作全选/取消全选复选框。问题是，窗口关闭后，标题复选框不会保持选中状态。E、 g.如果窗口打开，则选中标题复选框-
-
问题内容： 我希望一个事件在选中/未选中复选框时触发客户端： 基本上，我希望页面上的每个复选框都发生这种情况。这种触发点击并检查状态的方法可以吗？ 我认为必须有一种更清洁的jQuery方式。有人知道解决方案吗？ 问题答案： 绑定到事件而不是。但是，您可能仍然需要检查是否已选中该复选框： 绑定到 事件 而不是事件的主要好处是，并非所有对复选框的单击都会导致其更改状态。如果只想捕获导致复选框更改状态的