知道调用函数的组件

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