mobX - 过滤国家react-native？

IT技术 javascript reactjs react-native mobx
2021-05-23 02:31:59

我有一个包含 3 个国家的数组和一个文本输入来过滤它们。如果您输入文本输入，它应该检查您根据国家名称输入的内容，这应该返回与过滤文本匹配的新过滤国家列表。它还应该在旁边显示输入的文本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我什至尝试计算来返回过滤后的列表，但似乎无法让它工作。

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

1个回答

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

工作示例

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

代码

@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();
    }
}

react-native的陷阱

使用onChangeText正确的签名

jsx：

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

js：

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

利用 mobx-react/native

如果它仍然无法正常工作，我会仔细检查一下：

别：

import {observer} from 'mobx-react';

做：

import {observer} from 'mobx-react/native';
其它你可能感兴趣的问题
上一篇使用 Apollo 客户端 GraphQL 查询和修改表单 下一篇React.js：如何定义默认属性函数？