[英]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
是搜索的结果
那么,最好的技术是什么?
这是完整的代码部分
UPDATE
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 }
发生了什么
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.