我正在开发一个组件，它应该能够：
按输入搜索 - 使用输入字段，在触发 onBlur 事件后将调用一个函数。之后onBlur事件开始寻找() 方法将运行。
按所选流派过滤 - 用户可以从其他组件中从流派列表中选择流派。之后onClick事件启动过滤器() 方法将运行。
好消息：我让上面的两个功能工作了。
坏消息：上述2个功能无法正常工作。请参阅下面的代码。下面的两个调用可以工作，但前提是我注释掉其中一个。我尝试调整开始寻找() 方法有多种，但我只是一直走到一堵又大又胖的墙上。
//////Searching works
//////this.filter(this.state.searchInput);
//Filtering works
this.startFilter(this.state.searchInput);
QUESTION
如何使过滤/搜索方法正常工作？。不幸的是，简单地将它们放在 if/else 中并不是解决方案（请参阅代码中的注释）。
import { Component } from 'preact';
import listData from '../../assets/data.json';
import { Link } from 'preact-router/match';
import style from './style';
export default class List extends Component {
state = {
selectedStreamUrl: '',
searchInput: '',
showDeleteButton: false,
searchByGenre: false,
list: []
};
startFilter(input, filterByGenre) {
this.setState({
searchByGenre: true,
searchInput: input,
showDeleteButton: true
});
alert('startFilter ');
console.log(this.state.searchByGenre);
/////////---------------------------------
document.getElementById('searchField').disabled = false;
document.getElementById('searchField').value = input;
document.getElementById('searchField').focus();
// document.getElementById('searchField').blur()
document.getElementById('searchField').disabled = true;
console.log(input);
this.filter(input);
}
//search
startSearch(input) {
alert('startSearch ');
console.log(this.state.searchByGenre);
//komt uit render()
if (!this.state.searchByGenre) {
//check for input
this.setState({
searchInput: input.target.value,
showDeleteButton: true
});
//Searching works
//this.filter(this.state.searchInput);
//Filtering works
this.startFilter(this.state.searchInput);
// DOESNT WORK:
// if (this.state.searchInput != "") {
// this.filter(this.state.searchInput);
// } else {
// this.startFilter(this.state.searchInput);
// }
}
}
setAllLists(allLists) {
console.log('setAllLists');
console.log(this.state.searchByGenre);
this.setState({ list: allLists });
//document.body.style.backgroundColor = "red";
}
filter(input) {
let corresondingGenre = [];
let filteredLists = listData.filter(item1 => {
var test;
if (this.state.searchByGenre) {
alert('--this.state.searchByGenre');
//filterByGenre
//& item1.properties.genre == input
for (var i = 0; i < item1.properties.genre.length; i++) {
if (item1.properties.genre[i].includes(input)) {
corresondingGenre.push(item1);
test = item1.properties.genre[i].indexOf(input) !== -1;
return test;
}
this.setState({ list: corresondingGenre });
}
} else {
//searchByTitle
alert('--default');
test = item1.title.indexOf(input.charAt(0).toUpperCase()) !== -1;
}
return test;
});
console.log('filterdLists:');
console.log(filteredLists);
console.log('corresondingGenre:');
console.log(corresondingGenre);
//alert(JSON.stringify(filteredLists))
this.setState({ list: filteredLists });
}
removeInput() {
console.log('removeInput ');
console.log(this.state.searchByGenre);
this.setState({
searchInput: '',
showDeleteButton: false,
searchByGenre: false
});
document.getElementById('searchField').disabled = false;
this.filter(this.state.searchInput);
}
render() {
//alle 's komen in deze array, zodat ze gefilterd kunnen worden OBV title.
if (
this.state.list === undefined ||
(this.state.list.length == 0 && this.state.searchInput == '')
) {
//init list
console.log('render ');
console.log(this.state.searchByGenre);
this.filter(this.state.searchInput);
}
return (
<div class={style.list_container}>
<input
class={style.searchBar}
type="text"
id="searchField"
placeholder={this.state.searchInput}
onBlur={this.startSearch.bind(this)}
/>
{this.state.searchByGenre ? <h1>ja</h1> : <h1>nee</h1>}
{this.state.showDeleteButton ? (
<button class={style.deleteButton} onClick={() => this.removeInput()}>
Remove
</button>
) : null}
{this.state.list.map((item, index) => {
return (
<div>
<p>{item.title}</p>
</div>
);
})}
</div>
);
}
}
你问的问题不清楚。但请尝试明确您的组件以帮助调试问题。例如，使用构造函数并在其中声明组件状态。还要为其中的事件执行 .bind 以使其简洁。
以下示例在 onBlur 事件触发时将状态变量捕获为 true，这与其初始状态值相同：
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
searchByGenre: true
};
this.startSearch = this.startSearch.bind(this);
}
startSearch() {
// This value is true
console.log(this.state.searchByGenre)
}
render() {
return (
<input
type="text"
id="searchField"
placeholder="Search"
value={this.state.searchInput}
onBlur={this.startSearch}
/>
)
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
