Знать компонент, который вызвал функцию

1

Я хочу динамически создавать элементы пользовательского интерфейса, такие как: 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 на лету. Я не хочу явно ссылаться на каждый компонент и обновлять это свойство, но способ, которым он работает сейчас, невелик. Удаление этого свойства не отображает последний выбранный элемент, а самый верхний в списке.

Теги:
react-native

1 ответ

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);
Поделиться
  • 0
    Я создаю эти компоненты динамически. Я не знаю, сколько их будет. Это решение похоже на шаблонный код и не решает мою проблему.
  • 0
    Когда вы создаете их, вам нужно определить переменную состояния, для которой вы можете использовать. Переменные состояния могут создаваться динамически, поэтому я не понимаю, почему вы не можете использовать этот подход.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню