将值从 React Native 选择器组件传回 VueJS 调用者 [英] pass value from React Native picker component back to VueJS caller

问题描述

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

I have the following React Native picker component that works -
file name: 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

It is being called by a Vue JS file as follows -
file name: 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>

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

The picker component is being displayed correctly. When the user selects a different option, that change is displayed in the picker component. However, I am stuck on how to get the selected property in the distance.vue file to update when the user selects a different option. That value needs to be captured so it can be passed on to the caller of the distance.vue file and used for a calculation.

推荐答案

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

Figured it out - added a callback to props so the child can call that function to pass data back to the parent when the value is changed.

这里是更新的 distance.vue 文件(父)-

Here is the updated distance.vue file (parent) -

<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) 中唯一需要的改变就在这里 -

Then in dynamic-picker.js (child) the only change necessary was here -

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

这篇关于将值从 React Native 选择器组件传回 VueJS 调用者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！