使用ReactJs和mobx进行过滤搜索

Question

我正在尝试使用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

Answer 1

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

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

import React from "react";
import ReactDOM from "react-dom";

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 => {
    console.log(event.target.value);
    this.setState({
      filterTermValue: event.target.value.toString().toLowerCase()
    });
  };
}

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

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>