如何将Picker值传递给React Native中的父组件

我有一个子Picker，它应该将选定的值传递给它的父项。如果重要，组件在不同的.js文件中。如何传递选定项目的状态？如何将Picker值传递给React Native中的父组件

父

<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> 
     ); 
    } 
    }

我将不胜感激任何帮助和想法。

来源

2017-08-01 nastassia

在你的父母身上，创建一个函数，将捕获 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);

然后就叫你Picker的onValueChange功能 this.onValueChange1。

来源

2017-08-01 12:02:12 Dan

非常感谢！现在传递给父母完美的作品！很抱歉，我没有太多的声望投票给你的答案，但我很感激！ – nastassia

至于我的事情你可以做一件事，你可以在父组件

onValueChange={()=>{this.props.onValueChange1()}}

获得的价值和在组件调用此功能，所以您将获得价值

<RegionPicker onValueChange1={()=>{this.calculate()}}/>

调用在父母状态下的功能将是

calculate (value: string){ 
**Do you logic stuff here ** 

}

现在可以获得价值

来源

2017-08-01 12:02:29

如何将Picker值传递给React Native中的父组件

回答

相关问题