[英]React Native Change State from Custom Component
我有自定義選擇器組件,我想更新selectedValue和onValueChange事件的狀態。 如果我直接在渲染部分添加選擇器,則效果很好,但是由於代碼重復,我決定將選擇器轉換為自定義組件。 所以我這樣做是這樣的:
import React, { Component } from 'react';
import {
StyleSheet,
View,
Modal,
ActivityIndicator
} from 'react-native';
import { Item, Picker } from 'native-base'
const CustomPicker = props => {
const {
pickerLabel,
selectedVal,
onChangeVal,
pickerStyle,
pickerData,
...attributes
} = props;
return (
<Picker
selectedValue={selectedVal}
style={[pickerStyle]}
onValueChange={(itemValue, itemIndex) => this.setState({onChangeVal: itemValue})}>
<Picker.Item label={pickerLabel} value={''}/>
{pickerData.map((item, key) => (
<Picker.Item label={item} value={item} key={key}/>)
)}
</Picker>
)
}
const styles = StyleSheet.create({
});
export default CustomPicker;
我呼吁像這樣的不同組件:
<CustomPicker pickerLabel={"Select User"} selectedVal={this.state.selectedUser} pickerStyle={styles.picker} pickerData={this.state.userList} onChangeVal={this.state.selectedUser} />
標簽+數據很好地在選擇器中填充,但是事件正在發生。 它在選擇數據時未更新狀態,我缺少什么?
你需要做一個函數在父組件更改值,因為你想改變state
的stateless component
相反,您需要做的是
父組件
onChange = (itemValue, itemIndex) => {
// Set the state here and update as required
}
<CustomPicker pickerLabel={"Select User"} selectedVal={this.state.selectedUser} pickerStyle={styles.picker} pickerData={this.state.userList} onChangeVal={this.onChange} />
子組件
onValueChange={onChangeVal}>
對於多個選擇器:
父組件
state = {
user: [
{value: 'Something', key: 0, label: 'Select User', userList: [//...Some Array here]},
{value: 'Something Else', key: 1, label: 'Dont Select User', userList: [//...Some Array here]}
]
}
onChange = (itemValue, itemIndex, pickerIndex) => {
// Update the states based on the pickerIndex
}
const {user} = this.state
// Use a map here
user.map((data, index) => (
<CustomPicker key={index} index={index} pickerLabel={data.label} selectedVal={data.value} pickerStyle={styles.picker} pickerData={data.userList} onChangeVal={this.onChange} />
))
子組件
const {
index, <== Picker Index
pickerLabel,
selectedVal,
onChangeVal,
pickerStyle,
pickerData,
...attributes
} = props;
<Picker
selectedValue={selectedVal}
style={[pickerStyle]}
onValueChange={(itemValue, itemIndex) => this.props.onChangeVal(itemValue, itemIndex, index)}> <== Pass picker value to the parent
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.