如何將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中的父組件

回答

相關問題