根据状态显示和隐藏元素
Display and hide elements depending on state
我正在为我的应用程序做搜索栏功能,当没有搜索结果时,我需要显示Your search criteria is invalid
或相关的东西。
我用这个来显示结果
{!!this.state.value.length &&
<div>
{match}
</div>
}
,我想做一些类似
的事情 {(!this.state.result.length && !!this.state.value.length) &&
<Paper>Your search criteria is invalid</Paper>
}
,但是在第二种情况下,当有结果时仍然显示消息。
我这样做是因为如果我做if else
,我会得到一个错误
在本例中,this.state.value
是您在搜索栏中键入的内容,而this.state.result
是搜索
那么,什么是最好的技术呢?
下面是代码的完整部分
class UniversalSearch extends Component {
constructor() {
super();
this.state = {value : '', result: ''};
}
render () {
let searchVal = this._matchPeople(this.state.value),
match = Object.keys(searchVal).map(function(key) {
return <div className="threeColumn"><Paper><div className="maxHeight"><h3>{key}</h3><p>{searchVal[key]}</p></div></Paper></div>;
}),
searchResult = this.state.result ? match : (<Paper>Your search criteria is invalid</Paper>);
return (
<Grid>
<Row>
<Column>
<TextField onChange={this._onChange.bind(this)}
fullWidth={true} floatingLabelText="Universal Search"
onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
{searchResult}
</Column>
</Row>
</Grid>
);
}
_matchPeople = (input) => {
let reg = new RegExp(input.split('').join('''w*').replace(/'W/, ""), 'i');
let filteredObj = { };
Object.keys(falsyData).forEach(function(key) {
if(key.match(reg)){
filteredObj[key] = falsyData[key];
}
});
return filteredObj;
}
_changeInput = (val) => {
let autoCompleteResult = this._matchPeople(this.state.value);
if (autoCompleteResult.length) {
this.setState({result: autoCompleteResult.join(' ')});
};
}
_onChange = (event) => {
this.setState({value: event.target.value});
}
}
这样怎么样:
render() {
let searchResult = this.state.result ? match : (<Paper>Your search criteria is invalid</Paper>)
return (
<Column>
<TextField onChange={this._onChange.bind(this)}
onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
{ searchResult }
</Column>
);
}
编辑:
这是一个使用我建议的解决方案的工作JSFiddle尝试改变状态,看看{ searchResult }
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- JavaScript-在手机上不工作的情况下,在外部单击时隐藏元素
- 随时隐藏元素
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 隐藏元素直到加载完成(ng斗篷不是我需要的)
- 在具有类的元素中隐藏元素
- javascript()onclick隐藏元素-dos'我不在firefox工作
- JQueryHide()在按钮中使用元素时不会隐藏元素
- 使用Javascript取消隐藏元素
- 如果鼠标离开父对象,则隐藏元素
- 如何在jquery ajax成功html响应中找到输入隐藏元素
- 基于事件在循环中隐藏元素
- 渐进式增强-不使用CSS隐藏元素
- 隐藏元素后更新滚动条
- jQuery没有隐藏元素
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- 如何使用javascript在区域外单击时隐藏元素
- 如何在加载网页时隐藏元素
- JS:隐藏元素上的事件侦听器
- HTML 显示/隐藏元素 JS 不起作用