我有2个组件都是多选项目,变量-字母和大洲是从父组件传递来的参数。
<View style={globalStyles.settingspagecontainer}>
<MultiSelectExample
selectText='Select Characters'
items={alphabet_items}
alphabets={alphabets}/>
<MultiSelectExample
selectText='Select Continents'
items={continent_items}
continents={continents}/>
</View>
这里是多选组件-
class MultiSelectExample extends Component {
state = {
selectedItems : []
};
onSelectedItemsChange = selectedItems => {
this.setState({ selectedItems });
console.log('multipleselect set state')
};
render() {
const { selectedItems } = this.state;
return (
<View style={{ flex: 1 }}>
<MultiSelect
hideTags
items={this.props.items}
// settings={this.props.settings}
continents={this.props.continents}
alphabets={this.props.alphabets}
uniqueKey="id"
ref={(component) => { this.multiSelect = component }}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={selectedItems}
selectText={this.props.selectText}
searchInputPlaceholderText="Search Items..."
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>
{ this.multiSelect ? this.multiSelect.getSelectedItemsExt(selectedItems) : null}
</View>
</View>
);
}
}
export default MultiSelectExample;
当用户单击第一个多选项目时-字母状态变量需要更改。 当用户单击第二个多选项目时,需要更改大洲状态变量。
如何确定用户单击了哪个多选项目?