Question

当我在 textInput 中输入项目数时，我希望该项目的价格自动出现在 textIinput 中< strong>价格。这是我无法使用的快速脚本

请帮助我改进，谢谢

    constructor(props){
        super(props);
        this.state={
            qty: 0, 
            prc: 0,
        }
    }

    price = () =>{
        var price = this.state.qty * 250;
        this.setState({ 
            prc: price,
        })
    }

    render(){
        return (
            <View style={styles.container}>
                .....
                        <View style={{...}}>
                            <Text style={{...}}>Item number :</Text>
                            <TextInput
                                ...
                                onChangeText={(entry) => {
                                    this.setState({qty: entry})
                                    this.price();
                                }}
                                ...
                            />
                        </View>
                        <View style={{...}}>
                            <Text style={{...}}>Price :</Text>
                            <TextInput
                                ....
                                value={this.state.prc}
                                onChangeText={(entry) => {
                                    this.setState({prc: entry})
                                }}
                                ....
                            />
                        </View>
            </View>

Answer 1

按如下所示修改代码

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Item number :</Text>
    <TextInput
        value={this.state.qty}
        onChangeText={(entry) => {
            this.setState({
                qty: entry,
                prc: entry * 250
            })
        }}
    />
    <Text>Price :</Text>
    <TextInput
        value={this.state.prc}
        onChangeText={(entry) => {
            this.setState({
                prc: entry
            })
        }}
    />
</View>

如果您确实要使用功能price，请将其作为回调功能提供。

<TextInput
    value={this.state.qty}
    onChangeText={(entry) => {
        this.setState({
            qty: entry
        }, () => this.price())

    }}
/>

编辑-我添加了示例应用程序，对此进行了检查

import React, { Component } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";

export default class Example extends Component {
    state = {
        qty: 0,
        prc: 0,
    }

    price = () => {
        let price = this.state.qty * 250;
        this.setState({
            prc: price,
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>Item number :</Text>
                <TextInput
                    value={this.state.qty}
                    onChangeText={(entry) => {
                        this.setState({
                            qty: entry
                        }, () => this.price())

                    }}
                />
                <Text>Price :</Text>
                <TextInput
                    value={this.state.prc}
                    onChangeText={(entry) => {
                        this.setState({
                            prc: entry
                        })
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

希望这对您有所帮助。放心怀疑。

Answer 2

import React, { Component, useState } from 'react';

从“ react-native”导入{视图，文本，TextInput}；

导出默认示例=（）=> {

const [price, setprice] = useState(0);
return (
    <View>
        <Text>Item number :</Text>
        <TextInput
            onChangeText={(entry) => setprice(entry)}
        />
        <Text>Price :</Text>
        <TextInput defaultValue={(parseInt(price) * 250).toString()}></TextInput>
    </View>
);

}

反应本地textinput从另一个textinput获取值

2 个答案: