我正在构建一个应用程序,并引用此link我为我的应用程序实现了相同的代码,但我收到错误“无法读取未定义的属性'getSelectedItemsExt‘”。还有一个错误是“提交”按钮也没有显示出来。我试过所有的方法,但都失败了。
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, ListView, Alert, Button, Platform, ToastAndroid, TouchableOpacity, ActivityIndicator, Text, Picker, ScrollView }
from 'react-native';
import { StackNavigator } from 'react-navigation';
import MultiSelect from 'react-native-multiple-select';
class manage_publishers extends Component {
static navigationOptions = {
title: 'Manage Publishers',
};
constructor() {
super()
this.state = {
isLoading: true,
selectedPublishers1:[],
publishersByCategory: [],
publishersByClient: [],
publishersByGroup: [],
dataSource:[]
}
}
componentDidMount()
{
const base64 = require('base-64');
fetch('APIURL'+this.props.navigation.state.params.id,
{
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"Authorization": "Basic " + base64.encode("ABC:XYZ")
}
}).then((response) => response.json()
)
.then((responseJson) => {
this.setState({
categories: responseJson.PublisherByCategory,
}, function () {
});
})
.catch((error) => {
console.log("error in category");
console.log(error);
});
}
onSelectedPublishersByCategoryChange = (publishersByCategory) => {
console.log(publishersByCategory);
this.setState({ publishersByCategory });
}
render() {
const { navigate } = this.props.navigation;
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
return ([
<View style={{flex: 1,paddingTop: (Platform.OS === 'ios') ? 20 : 20, padding: 5}}>
<Text style={{ padding: 5, fontSize: 35, backgroundColor: '#2196F3', marginBottom: 7 }}>
Manage Publishers
</Text>
<MultiSelect
items={this.state.categories}
uniqueKey="id"
ref={(component) => { this.multiSelect = component }}
onSelectedItemsChange={this.onSelectedPublishersByCategoryChange}
selectedItems={this.state.publishersByCategory}
selectText="Publishers by Category"
searchInputPlaceholderText="Search Publisher..."
onChangeInput={ (text)=> console.log(text)}
altFontFamily="ProximaNova-Light"
tagRemoveIconColor="#CCC"
tagBorderColor="#CCC"
tagTextColor="#CCC"
selectedItemTextColor="#CCC"
selectedItemIconColor="#CCC"
itemTextColor="#000"
displayKey="name"
searchInputStyle={{ color: '#CCC' }}
submitButtonColor="#CCC"
submitButtonText="Submit"
/>
</View>,
<View>
{this.multiSelect.getSelectedItemsExt(selectedItems)}
</View>
]);
}
}
});
module.exports = manage_publishers;
请看看这个,并给我提供解决方案,我将非常感谢。
发布于 2020-03-27 23:08:35
如果你使用的是功能组件,你可以这样做。
像这样创建ref,
const multiSelect = useRef(null)
像这样访问getSelectedItemsExt函数,
<View>
{multiSelect.current && multiSelect.current.getSelectedItemsExt &&
multiSelect.current.getSelectedItemsExt(countries)}
</View>
发布于 2020-04-13 22:15:19
这是因为您在设置引用之前调用了一个方法。使用以下代码:
<View>
{ this.multiSelect ? this.multiSelect.getSelectedItemsExt(selectedItems) : null}
</View>
对此问题的参考:
https://github.com/toystars/react-native-multiple-select/issues/58#issuecomment-364136438
https://stackoverflow.com/questions/49442714
复制相似问题