我尝试过滤数组。当用户在React Native中的搜索输入中键入内容时,我需要“实时过滤”,但我像在React中通常执行过滤一样执行此操作。出现了一些错误。您能看一下并告诉我错误在哪里吗?现在我出现错误:undefined is not an object (this.state.inputValue.trim)
我想也许我应该为过滤器做一些其他的方法?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Image, TouchableOpacity, TextInput } from 'react-native';
import { TopName, BottomName, TitleLedger } from '../common/text';
import styles from './style';
const rows = [{
"img": require('../../assets/avatar.png'),
"name": "Johnny",
"nick": "@johny",
},{
"img": require('../../assets/avatar.png'),
"name": "Johnny",
"nick": "@johny",
},{
"img": require('../../assets/avatar.png'),
"name": "Alex",
"nick": "@alex",
},{
"img": require('../../assets/avatar.png'),
"name": "Johnny",
"nick": "@johny",
}];
export default class Payment extends Component {
state={
inputValue: ''
}
onChangeHandler = (e)=> {
this.setState({inputValue: e.target.value})
console.log(e.target.value, 'value')
}
render() {
const inputValueLet = this.state.inputValue.trim().toLowerCase();
let rowsNew = [];
if(rows.length>0){
rowsNew = rows.filter(row => {
return row.name.toLowerCase().match( inputValueLet )
});
}
const { navigator } = this.props;
const dataRow = rowsNew.map((row, index) => {
return (
<View style={styles.content}>
<Image source={row.img} style={styles.avatar}/>
<View key={index} id={index} style={styles.operation}>
<View style={styles.wrapper}>
<View style={styles.topName}>
<TopName label={row.name} />
</View>
<View style={styles.bottomName}>
<BottomName label={row.nick} />
</View>
</View>
</View>
</View>
)
})
return (
<View>
<View>
<TextInput
style={styles.searchBar}
type="text"
value={this.state.inputValue}
onChange={this.onChangeHandler}
placeholder='Search'
/>
</View>
<View style={styles.container}>
{dataRow}
</View>
</View>
);
}
}
3条答案
按热度按时间7cwmlq891#
react本机
TextInput#onChange
中没有event.target.value
。请使用event.nativeEvent.text
或onChangeText
事件,在其中获取文本作为回调参数。klsxnrf12#
state
中的inputValue
被声明为字符串''
。解决错误
undefined is not an object (this.state.inputValue.trim)
。我认为应该将
inputValue
声明为对象:wgeznvg73#