[嘿,我仍在学习React Native,我有这个针对iOS的自定义选择器组件,我要做的是我想在onSubmit()
时清除选择器。当我从另一个组件执行onSubmit()
时,应如何将选择器状态设置为其默认状态?
PickerWrapper.js
class PickerWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
type_absen: this.props.items[0].description,
modal: false
}
}
render() {
let picker;
let iosPickerModal = (
<Modal isVisible={this.state.modal} hideModalContentWhileAnimating={true} backdropColor={color.white} backdropOpacity={0.9} animationIn="zoomInDown" animationOut="zoomOutUp" animationInTiming={200} animationOutTiming={200} onBackButtonPress={() => this.setState({ modal: false })} onBackdropPress={() => this.setState({ modal: false })} >
<View style={{ backgroundColor: color.white, width: 0.9 * windowWidth(), height: 0.3 * windowHeight(), justifyContent: 'center' }}>
<Picker
selectedValue={this.state.type_absen}
onValueChange={(itemValue, itemIndex) => {
this.setState({ type_absen: itemValue });
this.setState({ modal: false });
setTimeout(() => this.props.onSelect(itemValue), 1200);
}}
>
{this.props.items.map((item, key) => <Picker.Item label={item.description} value={item.id} key={item.id} />)}
</Picker>
</View>
</Modal>);
if (Platform.OS === 'ios') {
var idx = this.props.items.findIndex(item => item.id === this.state.type_absen);
return (
<View style={this.props.style}>
{iosPickerModal}
<TouchableOpacity onPress={() => this.setState({ modal: true })}>
<View style={{ flexDirection: 'row', height: this.props.height ? this.props.height : normalize(40), width: this.props.width ? this.props.width : 0.68 * windowWidth(), borderWidth: 1, borderColor: color.blue, alignItems: 'center', borderRadius: 5 }}>
<Text style={{ fontSize: fontSize.regular, marginRight: 30 }}> {idx !== -1 ? this.props.items[idx].description : this.state.type_absen}</Text>
<IconWrapper name='md-arrow-dropdown' type='ionicon' color={color.light_grey} size={20} onPress={() => this.setState({ modal: true })} style={{ position: 'absolute', right: 10 }} />
</View>
</TouchableOpacity>
</View >);
}
}
}
这是我打电话给我的选择器的地方
App.js
class App extends Component {
constructor() {
super();
this.state = {
type_absen: ''
}
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit() {
this.props.actionsAuth.changeSchedule(this.props.token, this.state.type_absen, (message) => alert(message));
this.setState({ type_absen: ''});
}
render(){
let scheduleTypes = this.props.schedules;
return(
<PickerWrapper items={[{ "description": "Schedule Type", "id": "0" }, ...scheduleTypes]} onSelect={(item) => this.setState({ type_absen: item })} />
);
}
}
[嘿,我仍在学习React Native,我有这个针对iOS的自定义选择器组件,我要做的就是在执行onSubmit()时要清除选择器。我应该怎么设置...
要从父级更新子级(PickerWrapper),您必须在子级中创建一个新方法并从父级中调用它。为此,父级应该让子级reference
能够从中调用某些方法]