如何基于React Native中的数量改变产品的价值

Question

当用户选择不同的重量时，我试图改变产品的价格。 例如，假设用户要购买芒果，默认情况下，我正在显示芒果的价格/ kg，现在，如果用户将重量从1kg更改为500gm，则值应该更改。

我已经在显示产品和下拉选项以显示可用重量。 但不确定如何根据权重更改价格的价值。

这是我的代码，用于显示产品列表和重量选项

PS：这是产品列表屏幕，我要在其中进行更改

Productlisting.js

render() {
    return (
        <View style={styles.productListingContainer}>

            <ListView
                enableEmptySections={ true }
                dataSource={ this.state.dataSource }
                renderRow={ this._renderRow } />
        </View>
    )
}

 //Rander products
  _renderRow =(rowData)=> {
        return (
            <ProductThumb { ...rowData } onPress={() => this._pressProduct(rowData.id) } />
        )
    };

Productcard.js

  //Onvalue change
  onValueChange(value: string) {
        this.setState({
            selected: value,
        });
    }

 //This is render content
 <TouchableOpacity style={ styles.row } onPress={ this.props.onPress }>
                <Image style={ styles.image } source={{ uri: rowData.imageUri }} />
                <View style={ styles.textsHolder }>
                    <Text ellipsizeMode='tail' numberOfLines={2} style={ [styles.name,stylesheet.mb4] }>{ rowData.name } </Text>

                    <View style={[{flexDirection: 'row'},stylesheet.mb4]}>
                        <Text style={ styles.prize }>$ { rowData.prize } </Text>
                        {
                            (rowData.regularPrize) ? <Text style={ styles.regularPrize }>$ { rowData.regularPrize }</Text>: null
                        }
                    </View>

                    <View style={{flexDirection: 'row',flex:1}}>

                        <View style={styles.pickerWraper}>
                            <Picker
                                mode="dropdown"
                                style={styles.picker}
                                selectedValue="200gm"
                                itemStyle={styles.pickerItem}
                                onValueChange={this.onValueChange.bind(this)}
                            >
                                <Item label="200gm" value="key0" />
                                <Item label="1kg" value="key1" />
                            </Picker>
                        </View>

                        <Button iconLeft small style={[stylesheet.pr5,stylesheet.ml5,styles.subbutton]}>
                            <Icon style={{marginRight:4, marginLeft:6,color:colors.white}}  active name="cart" />
                            <Text style={{color:colors.txt_white}}>Subscribe</Text>
                        </Button>
                    </View>
                </View>
            </TouchableOpacity>

成为对本机和javascript框架有整体反应的新手。 我真的不确定要从什么开始。 如果有人可以提供一些指导，那将非常有帮助。 谢谢

Answer 1

我将通过基本上遵循以下步骤来解决此问题：

1. 在您的render()方法中，您基本上可以设置自己的变量来向用户显示动态价格。 例如， const displayPrice = !this.state.selected ? this.props.item.price : getPriceWithUnit(this.state.selected, this.props.item.price) const displayPrice = !this.state.selected ? this.props.item.price : getPriceWithUnit(this.state.selected, this.props.item.price) 。 在这里，我检查了是否已选择一个单位（假设默认值为null）。 如果没有，那么我使用默认商品价格。 如果用户选择了一个保存的单位，那么我将使用以下函数生成的值：

2. 设置函数getPriceWithUnit(unit, price) ，该函数基本上将原始价格转换为新的显示价格所需的单位（取决于该单位），在此位置，通过选定的状态引用，您将需要该单位。

3. 与其使用在组件中显示商品的价格， displayPrice使用<Text>{displayPrice}</Text>这样的新变量displayPrice 。

然后，每当用户更改所选单位的值时，它将触发状态更新。 然后，这将导致组件重新渲染，并在此过程中更新此变量。