React Native 中的过滤数组
2017-08-09
3407
我尝试过滤数组。当用户在 React Native 中的搜索输入中输入内容时,我需要“实时过滤”,但我这样做就像我通常在 React 中过滤一样。出了点问题。
你能看看并告诉我哪里出错了吗?现在我遇到错误:
undefined 不是对象 (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个回答
React Native
TextInput#onChange
中没有
event.target.value
。使用
event.nativeEvent.text
或
onChangeText
事件
,其中文本作为回调参数。
<TextInput
style={styles.searchBar}
type="text"
value={this.state.inputValue}
onChangeText={inputValue => this.setState({ inputValue })}
placeholder='Search'
/>
Yury Tarabanko
2017-08-09
inputValue
在您的
state
中被声明为字符串
''
。
state = {
inputValue: ''
}
解决错误
undefined 不是对象 (this.state.inputValue.trim)
。
我认为您应该将
inputValue
声明为对象:
state = {
inputValue: {}
}
Anurag Singh Bisht
2017-08-09
onChange={(e)=>{setSearch(e.target.value)}}
users.filter(item=>item.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())).map((item)=>
DianaS pencer
2023-01-23