我有一个子Picker,它应该将选定的值传递给它的父级。如果组件很重要,则组件位于不同的.js文件中。 如何通过所选项目的状态?
父
<RegionPicker regions={this.props.navigation.state.params.regionsJSON}/>
子:
export default class RegionPicker extends Component {
constructor(props) {
super(props);
this.state = {
selected1: '1',
selected2: '1'
};
}
onValueChange1(value: string) {
this.setState({selected1: value},
()=>{ console.log('new',this.state.selected1)}
);
}
onValueChange2(value: string) {
this.setState({selected2: value},
()=>{ console.log('new',this.state.selected2)}
);
}
render() {
return (
<View>
<Form>
<Item inlineLabel>
<Label style={{fontSize:16}}>Region</Label>
<Picker
iosHeader="Select one"
mode="dropdown"
placeholder='...'
selectedValue={this.state.selected1}
onValueChange={this.onValueChange1.bind(this)}
>
{this.getRegions(this.props.regions).map((item, index) => {
return (<Picker.Item label={item} value={item} key={index}/>)
})}
</Picker>
</Item>
<Item inlineLabel last>
<Label style={{fontSize:16}}>Suburb</Label>
<Picker
iosHeader="Select one"
mode="dropdown"
placeholder='...'
selectedValue={this.state.selected2}
onValueChange={this.onValueChange2.bind(this)}
>
{this.getSuburbs(this.state.selected1).map((item, index) => {
return (<Picker.Item label={item} value={item} key={index}/>)
})}
</Picker>
</Item>
</Form>
</View>
);
}
}
我希望得到任何帮助和想法。
答案 0 :(得分:3)
在您的父级中,创建一个捕获 RegionPicker值的函数。在此示例中,myFunction
。
myFunction = (value) => {
console.log(value);
}
然后将您的函数传递为prop
,如下所示:
<RegionPicker
regions={this.props.navigation.state.params.regionsJSON}
onChange={e => { this.myFunction(e) }}
/>
在RegionPicker
内,您只需在onValueChange1()
和onValueChange2()
内调用您的功能。
this.props.onChange(value);
您还应.bind()
constructor
内的RegionPicker
函数。因此,您可以在this.onValueChange1 = this.onValueChange1.bind(this);
this.onValueChange2 = this.onValueChange2.bind(this);
内添加
this.onValueChange1
然后打电话
Picker
onValueChange
函数中的{{1}}。
答案 1 :(得分:0)
我可以做一件事,你可以在父组件中获取值
onValueChange={()=>{this.props.onValueChange1()}}
在组件中,您调用此函数,以便获得值
<RegionPicker onValueChange1={()=>{this.calculate()}}/>
调用父状态的函数将是
calculate (value: string){
**Do you logic stuff here **
}
你现在可以获得价值吗