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

知道调用函数的组件

1 个答案: