javascript - 了解调用函数的组件

Question

我想动态创建 UI 元素，例如:https://facebook.github.io/react-native/docs/picker.html基于 JSON 数据。

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

使用这个样板我发现两个问题:

首先:我无法区分调用该方法的 Picker 组件。 JavaScript 有没有办法知道哪个组件调用了某个函数？ (我是一个 JS 菜鸟，找不到任何对此有帮助的东西)

第二:selectedValue 属性绑定(bind)到状态。在我动态创建 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);