使用 ReactJs 和 mobx 过滤搜索答案

【问题标题】：Filter search with ReactJs and mobx使用 ReactJs 和 mobx 过滤搜索
【发布时间】：2020-02-08 08:06:18
【问题描述】：

我正在尝试使用 mobx-react 而不是 state 对导入的项目列表（标题和描述）进行过滤搜索输入。但是当我输入输入时，在控制台中我得到 [object object]，当然没有过滤任何内容。这是我的代码，我是 mobx 的新手。谁能帮我？提前谢谢！！！

import React from "react";
import items from "../pages/items";
import {observable, action, computed, decorate} from 'mobx';
import {observer} from 'mobx-react';


class Searchbar extends React.Component {
  filterTermValue = [];
  itemsList = items

  get filtered() {
    let filteredList = this.itemsList.filter(
    t=>(t.title && t.description).indexOf(this.filterTermValue)>-1 
    );

    if (filteredList.length)
      return filteredList;
      return this.itemsList;

    }

  render() {
    return (
      <div>
          Term: <input placeholder="Search"
                  onKeyUp={this.onChangeFilterTerm} />

          {this.filtered.map(item =>
              <div key={item.index}>
                <h5>{item.title}</h5>
                <p>{item.description}</p>
              </div>
            )}
      </div>
    )
  }

   onChangeFilterTerm = value => {
    this.filterTermValue = value.toString().toLowerCase();
    console.log(this.filterTermValue)
  }
}
decorate(Searchbar, {
  filterTermValue: observable,
  itemsList: observable,
  filtered: computed,
  onChangeFilterTerm: action
});


export default Searchbar

【问题讨论】：

标签： reactjs input filter mobx mobx-react

【解决方案1】：

希望还不算太晚。

似乎您没有在 onChangeFilterTerm 方法中检索 event.target.value。

我在这里为你创建了一个工作版本：

class Searchbar extends React.Component {
  constructor() {
    super();
    this.state = {
      filterTermValue: "",
      itemsList: [{
          title: "Think and Grow Rich",
          description: "a book"
        },
        {
          title: "bbb",
          description: "ccc"
        }
      ]
    };
  }

  get filtered() {
    let filteredList = this.state.itemsList.filter(item =>
      item.title.toLowerCase().includes(this.state.filterTermValue) || item.description.toLowerCase().includes(this.state.filterTermValue)
    );

    if (filteredList.length) return filteredList;
    return this.state.itemsList;
  }

  render() {
    return ( <
      div >
      Term: < input placeholder = "Search"
      onKeyUp = {
        this.onChangeFilterTerm
      }
      /> {
        this.filtered.map(item => ( <
          div key = {
            item.index
          } >
          <
          h5 > {
            item.title
          } < /h5> <
          p > {
            item.description
          } < /p> <
          /div>
        ))
      } <
      /div>
    );
  }

  onChangeFilterTerm = event => {
    this.setState({
      filterTermValue: event.target.value.toString().toLowerCase()
    });
  };
}

ReactDOM.render( < Searchbar / > , document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

由于我不太习惯使用类属性，因此我使用了传统的状态方法来使其快速工作。

希望能帮到你，如果没有，我很乐意帮忙。

【讨论】：