Reactネイティブでピッカー値を親コンポーネントに渡す方法

Question

私は子ピッカーを持っており、選択した値をその親に渡す必要があります。重要な場合、コンポーネントは異なる.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> 
     ); 
    } 
    } 

私は任意のヘルプやアイデアをいただければ幸いです。

Answer 1

親で、を取得してのRegionPicker値になる関数を作成します。この例では、myFunctionです。あなたは、単にonValueChange1()とonValueChange2()以内にあなたの関数を呼び出すことができますRegionPickerの内部

<RegionPicker 
    regions={this.props.navigation.state.params.regionsJSON} 
    onChange={e => { this.myFunction(e) }} 
/> 

：

myFunction = (value) => { 
    console.log(value); 
} 

はその後そうのような、propとしてあなたの機能を伝承。

this.props.onChange(value); 

またconstructor以内にあなたの機能を.bind()必要があります。だからあなたのRegionPickerの内側にあなたは

this.onValueChange1 = this.onValueChange1.bind(this); 
this.onValueChange2 = this.onValueChange2.bind(this); 

を追加することができます。そして自分のPickerのonValueChange機能で this.onValueChange1を呼び出します。あなたは親コンポーネント

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

に値を取得することができます一つのことを行うことができますし、値を呼び出す

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

を取得するように、コンポーネントでこの関数を呼び出す私の事として

Answer 2

親状態の関数はになります