Question

我正在尝试使用react native过滤用户列表

我有一个用户数组，然后我要过滤其名称开头。下面是我的代码。

import React, { Component } from 'react';
import {
    StyleSheet, TextInput, View, Alert, ListView, TouchableOpacity,
    ActivityIndicator, ScrollView, Image, ImageBackground
} from 'react-native';
import {
    Container, Content, Form, Item, Input, Text, Button, Footer, FooterTab, Icon,
    Spinner, Grid, Row, Col, Card, CardItem, List, Header, ListItem, Body, Right, Title, Picker, Left, Thumbnail
} from 'native-base';
import { Actions } from 'react-native-router-flux';
import Gradient from 'react-native-linear-gradient';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { compose } from 'redux';
import { connect } from "react-redux";
import _ from 'lodash';

import { signup, city, country, region, login, providers } from '../../actions';

const userList = [
    {
        name: 'Raul',
        age: 29
    },
    {
        name: 'Mario',
        age: 22
    }
]; /*List of users*/

export default class DoctorList extends Component {


    constructor(props) {
        super(props);

        this.state = {
            users: this.props.users,
            filteredUsers: [],
            q: ''
        };

        this.filterList = this.filterList.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.setState(
            {
                users: nextProps.users,
                filteredUsers: nextProps.users
            },
            () => this.filterList()
        );
    }

    onChange(event) {
        const q = event.target.value.toLowerCase(); < ----- Here is the Error
        this.setState({ q }, () => this.filterList());
    }

    filterList() {
        let users = this.state.users;
        let q = this.state.q;

        users = users.filter(function (user) {
            return user.name.toLowerCase().indexOf(q) != -1; // returns true or false
        });
        this.setState({ filteredUsers: users });
    }

    render() {
        const userList = this.state.filteredUsers.map(user => {
            return <List>{user.name} {user.age}</List>;
        });

        return (
            <ScrollView>
                <TextInput
                    type="text"
                    placeholder="Search"
                    value={this.state.q}
                    onChange={this.onChange}
                />
                <List>
                    {userList}
                </List>
            </ScrollView>
        );
    }
}

Answer 1

否则使用 onChangeText 代替 onChange

  onChangeText={(value) => this.onChange(value)}

未定义不是对象（正在评估'event.target.value.toLowerCase'）

1 个答案: