mobX-在响应国家时过滤国家吗? [英] mobX - Filter countries in react native?

问题描述

我有一个由3个国家/地区组成的数组，并输入了一个文本来过滤它们.如果输入文本输入，它将检查针对国家名称输入的内容，这将返回与过滤后的文本匹配的新的过滤后的国家列表.它还应该在Typed Text:

I have an array of 3 countries and a text input to filter them. If you type in the text input, it should check for what you typed against the country name, which should return the new filtered list of countries that match the filtered text. It should also display the inputted text next to Typed Text:

import React, { Component } from 'react'
import { View, Text, TextInput } from 'react-native'
import { observable, action } from 'mobx';
import { observer } from 'mobx-react/native'

@observer
export default class Country extends Component {
    @observable filterTermValue;
    @observable countriesList = [
      {'slug': 'amsterdam', 'name': 'Amsterdam'},
      {'slug': 'usa', 'name': 'United States'},
      {'slug': 'vienna', 'name': 'Vienna'}
    ];

    render() {
        return (
            <View>
                <Text>Typed Text: {this.filterTermValue}</Text>
                <TextInput placeholder="Start typing country"
                   value={this.filterTermValue}
                   onChange={this.onChangeFilterTerm} />

                {this.countriesList.map(country =>
                    <View key={country.slug}>
                      <Text>{country.name}</Text>
                    </View>
                )}
            </View>
        )
    }

    @action onChangeFilterTerm = (e) => {
        this.filterTermValue = e.target.value;

        this.countriesList.replace(this.countriesList.filter(el => el.name.toLowerCase().indexOf(this.filterTermValue.toLowerCase()) > -1));
    }
}

这就是我的全部逻辑，但我无法使其正常工作.唯一有效的方法是国家列表加载原始数组.一旦我开始输入内容，该值将是不确定的，并且永远不会打印，并且列表也不会被过滤.我还尝试了async动作，并且甚至尝试了runInAction计算返回列表，但似乎无法使其正常工作.

That's all the logic I have and I can't get it to work. The only thing that works is the country list loads the original array. Once I start typing in the input, the value is undefined and never prints, and the list is never filtered. I also tried async actions and runInAction I even tried computed to return the filtered list, but can't seem to get it to work.

在mobX中执行此操作的正确方法是什么?

What is the right way to do this in mobX?

推荐答案

我看到了一些可能的问题，所以我稍微改变了方法.

I saw a few possible problems, so I slightly changed the approach.

更新 工作示例.请注意，这在react-native中未经测试，但应该可以使用.

UPDATED Working example. Note this is untested in react-native, but it should work.

@observer
class Country extends React.Component {


    @observable filterTermValue = '';
    @observable countriesList = [
      {'slug': 'amsterdam', 'name': 'Amsterdam'},
      {'slug': 'usa', 'name': 'United States'},
      {'slug': 'vienna', 'name': 'Vienna'}
    ];

    @computed get filtered() {
      let filteredList = this.countriesList.filter(
        t=>t.name.toLowerCase().indexOf(this.filterTermValue)>-1
      );
      if (filteredList.length)
        return filteredList;
      return this.countriesList;
    }

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

              {this.filtered.map(country =>
                  <div key={country.slug}>
                    <p>{country.name}</p>
                  </div>
              )}
          </div>
        )
    }

    @action onChangeFilterTerm = value => {
        this.filterTermValue = value.toLowerCase();
    }
}

反应性豆科动物

使用onChangeText正确签名

React-native gotchyas

Use onChangeText correct signature

jsx:

    <input placeholder="Start typing country"
            onKeyUp={this.onChangeFilterTerm} />

js:

    @action onChangeFilterTerm = value => {
        this.filterTermValue = value.toLowerCase();
    }

使用mobx-react/native

Use mobx-react/native

如果它仍然无法正常工作，我会再次检查:

If its still not working, I would double check this:

不:

import {observer} from 'mobx-react';

做:

import {observer} from 'mobx-react/native';

这篇关于mobX-在响应国家时过滤国家吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！