React:搜索和过滤器功能出现问题

问题描述

我正在研究一个应该能够做到的组件

I'm working on a component that should be able to:

1. 按输入搜索-触发onBlur事件后，将使用输入字段调用一个函数. onBlur 事件发生后， startSearch ()方法将运行.

1. Search by input - Using the input field a function will be called after the onBlur event got triggered. After the onBlur event the startSearch() method will run.

按选定流派过滤-用户可以从其他组件中从具有流派的列表中选择流派.在 onClick 事件之后，将运行 startFilter ()方法.

Filter by a selected genre - From an other component the user can select a genre from a list with genres. After the onClick event the startFilter() method will run.

好消息:我得到了上面工作的两个功能.

GOOD NEWS:I got the 2 functions above working.

坏消息:以上2个功能无法正常工作.请参见下面的代码.工作下面有2个调用，但仅当我注释掉2个之一时.我试图以各种方式调整 startSearch ()方法，但我只是一直走到一堵胖墙.

BAD NEWS:The above 2 functions don't work correct. Please see the code underneath. The 2 calls underneath work, but only if I comment one of the 2 out. I tried to tweak the startSearch() method in various ways, but I just keep walking to a big fat wall.

//////Searching works
//////this.filter(this.state.searchInput);

//Filtering works
this.startFilter(this.state.searchInput);

问题如何使过滤器/搜索方法起作用?.不幸的是，简单地将它们放在if/else中不是解决方案(请参阅代码中的注释).

QUESTIONHow can I get the filter/search method working?. Unfortunately simply putting them in an if/else is not the solution (see comments in the code).

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操作.

The question you are asking is not clear. But try to be explicit with your component to help debug the issue. For example, use a constructor and declare your component state in there. Also do your .bind for the event in there to be concise.

以下示例在触发onBlur事件时将状态变量捕获为true，这与其初始状态值相同:

The following example captures the state variable to be true when the onBlur event is fired, which is the same as its initial state value:

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}
        />
    )
}

这篇关于React:搜索和过滤器功能出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！