関数を呼び出したコンポーネントを知ってください

Question

JSONデータに基づいてhttps://facebook.github.io/react-native/docs/picker.html などのUI要素を動的に作成します。この決まり文句を使う

<Picker 
    selectedValue={this.state.language} 
    onValueChange={(lang) => this.setState({language: lang})}> 
    <Picker.Item label="Java" value="java" /> 
    <Picker.Item label="JavaScript" value="js" /> 
</Picker> 

私は2つの問題を参照してください。

まず：私はメソッドを呼び出しピッカーコンポーネントを区別することはできませんが。どのコンポーネントが特定の関数を呼び出したかを知るためのJavaScriptの方法はありますか？ （私はJSのnoobで、これについて何か助けになるものが見つかりませんでした）

Second：selectedValueプロパティは状態にバインドされています。ピッカー要素をその場で作成する私のケースでは、これをどうやって行うのですか？私は、明示的に各コンポーネントを呼び出してこのプロパティを更新する必要はありませんが、現在動作している方法はあまり良くありません。このプロパティを削除しても、最後に選択された項目は表示されず、リストの一番上に表示されます。

Answer 1

各コンポーネントの各値の状態を保持する必要があります。それを行うには複数の方法があります。一つの方法は次のとおりです。

<Picker 
    selectedValue={this.state.picker1} 
    onValueChange={(lang) => { 
    let state = this.state; 
    state['picker1'] = val; 
    this.setState(state); 
    }}> 
    <Picker.Item label="Java" value="java" /> 
    <Picker.Item label="JavaScript" value="js" /> 
</Picker> 

例コード

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TextInput 
} from 'react-native'; 

export default class DemoProject extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 

    _renderInputs() { 
    const inputCount = 4; 
    const inputs = []; 
    for (let i = 0; i < inputCount; i++) { 
     const stateValueIdentifier = 'text' + i; 
     inputs.push(
     <TextInput 
      style={styles.inputStyle} 
      key={'text-input-' + i} 
      onChangeText={(text) => { 
      let state = this.state; 
      state[stateValueIdentifier] = text; 
      this.setState(state) 
      }} 
      value={this.state[stateValueIdentifier]} 
     /> 
    ) 
    } 
    return inputs; 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Text>test</Text> 
     {this._renderInputs()} 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column' 
    }, 
    inputStyle: { 
    height: 40, 
    borderColor: 'gray', 
    borderWidth: 1, 
    flex: 1 
    } 
}); 

AppRegistry.registerComponent('DemoProject',() => DemoProject);