知道調用函數的組件

Question

我想基於JSON數據動態創建UI元素，例如：https://facebook.github.io/react-native/docs/picker.html 。

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

使用這個樣板我看到兩個問題：

第一：我不能調用該方法的選取器組件區分。有沒有在JavaScript的方式來知道哪個組件稱爲某個功能？ （我是JS noob，找不到任何有用的信息）

第二種：selectedValue屬性綁定到狀態。在我創建Picker元素的情況下，我將如何去做這件事。我不想明確地調用每個組件並更新這個屬性，但它現在的工作方式並不是很好。刪除此屬性不會顯示最後選擇的項目，而是顯示列表中最上面的項目。

Answer 1

您需要爲每個<Picker>組件的每個值保留狀態。有多種方式可以做到這一點。一種方法是：

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