时间戳

首页 > 解决方案 > 将值从 React Native 选择器组件传递回 VueJS 调用者

react-native - 将值从 React Native 选择器组件传递回 VueJS 调用者

问题描述

我有以下可用的 React Native 选择器组件 -
文件名：dynamic-picker.js

import React, { Component } from "react";
import { Container, Content, Picker } from "native-base";

export default class DynamicPicker extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: this.props.selected
    }
  }

  onValueChange(value) {
    this.setState({
      selected: value
    });
  }

  itemsList = () => {
    return (this.props.items.map( (item, index) => {
      return (<Picker.Item label={item} key={index} value={item} />)
    }));
  }

  render() {
    return (
      <Container>
        <Content>
            <Picker
              mode="dropdown"
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              { this.itemsList() }
            </Picker>
        </Content>
      </Container>
    );
  }
}

它被一个 Vue JS 文件调用如下 -
文件名：distance.vue

<template>
  <dynamic-picker :items="items" :selected="selected" ></dynamic-picker>
</template>

<script>
import DynamicPicker from './dynamic-picker';

export default {
  components: {
    DynamicPicker
  },
  data() {
    return {
      selected: 'yards',
      items: ["yards", "feet", "meters"]
    }
  }
}
</script>

选择器组件正在正确显示。当用户选择不同的选项时，该更改将显示在选择器组件中。selected但是，当用户选择不同的选项时，我被困在如何获取 distance.vue 文件中的属性以进行更新。需要捕获该值，以便将其传递给 distance.vue 文件的调用者并用于计算。

标签： react-nativevue.js

解决方案

想通了 - 为 props 添加了一个回调，以便孩子可以在值更改时调用该函数将数据传递回父级。

这是更新的 distance.vue 文件（父）-

<template>
  <dynamic-picker :items="items" :selected="selected" :onValueChange="onValueChange" ></dynamic-picker>
</template>

<script>
import DynamicPicker from './dynamic-picker';

export default {
  components: {
    DynamicPicker
  },
  data() {
    return {
      selected: 'yards',
      items: ["yards", "feet", "meters"]
    }
  },
  methods: {
    onValueChange(value) {
      this.selected = value;
    }
  }
}
</script>

然后在 dynamic-picker.js (child) 中唯一需要的改变是在这里 -

  onValueChange(value) {
    this.setState({
      selected: value
    });
    this.props.onValueChange(value);  // added this line
  }

推荐阅读