当前位置: 首页 > 知识库问答 >
问题:

如何基于字段值以React Native的形式更新其他字段?

姚高韵
2023-03-14

我有4个输入字段如下。名称,计数,金额,价格。和两个文本字段,佣金和总额。

如果用户输入价格和计数值,则应计算金额(价格*计数)。如果用户输入价格和金额值,则应计算计数(金额/价格)。在这两种情况下,佣金=0.02*金额和总额=金额佣金都应更新。

所以,我尝试了下面的代码片段作为根据价格更新金额和佣金的开始。但是它没有更新。

//应用程序。js

import React from "react";
import App1 from "./src/screens/createCoin.jsx";
import * as Font from "expo-font";

export default function App() {
  return <App1 />;
}

//createCoins.jsx

import React, { Component, useState } from "react";
import {
  Container,
  Header,
  Content,
  H1,
  Text,
  Form,
  Item,
  Input,
} from "native-base";

export default function createCoins() {
  const [name, setName] = useState("");
  const [price, setPrice] = useState("");
  const [amount, setAmount] = useState("");
  const [commission, setCommission] = useState("");
  const [count, setCount] = useState("");

  updateDetails = (text, type) => {
    console.log("came to update Details...");
    if (type === "price") {
      const price = parseFloat(text);
      setPrice(price);
      setAmount(price * count);
      setCommission(amount * 0.002);
    }
  };

  return (
    <Container>
      <Header />
      <Content>
        <Form>
          <Item>
            <Input
              placeholder="coin name"
              onChangeText={(text) => setName(text)}
            />
          </Item>
          <Item>
            <Input
              placeholder="number of coins"
              onChangeText={(text) => setCount(count)}
            />
          </Item>
          <Item>
            <Input
              placeholder="Amount Invested"
              onChangeText={(text) => setAmount(amount)}
            />
          </Item>

          <Item last>
            <Input
              placeholder="coin price"
              onChangeText={(text) => updateDetails(text, "price")}
            />
          </Item>
        </Form>
        <Text>Commission: {commission}</Text>
        <Text>Total Amount: {commission + amount}</Text>
      </Content>
    </Container>
  );
}

你能推荐一下吗。

更改createC的代码后oin.jsx如下。文本字段“总量”正在更新,但是如何更新输入字段的数量?我尝试向其添加属性值={state.amount},但没有像无效prop那样获得错误。

import React, { Component, useState } from "react";
import {
  Container,
  Header,
  Content,
  H1,
  Text,
  Form,
  Item,
  Input,
} from "native-base";

export default function createCoins() {
  const [name, setName] = useState("");
  //const [price, setPrice] = useState("");
  //const [amount, setAmount] = useState("");
  //const [commission, setCommission] = useState("");
  //const [count, setCount] = useState("");
  const [state, setState] = useState({
    price: 0,
    amount: 0,
    commission: 0,
    count: 0,
  });

  /*const updatePrice = (value) => {
    console.log("came to update Details...");
    if (count) {
      setPrice(value);
      setAmount(value * count);
    }
  };*/

  updateDetails = (text, type) => {
    console.log("came to update Details...");
    if (type == "count") {
      setState({
        ...state,
        count: text,
      });
    }
    if (type === "price") {
      console.log("came inside price");
      const price = parseFloat(text);
      setState({
        ...state,
        price: price,
        amount: price * state.count,
        commission: state.price * state.count * 0.002,
      });
      //setPrice(price);
      //setAmount(price * count);
      //setCommission(amount * 0.002);
      console.log("price:" + price);
      console.log(state.amount);
      console.log(state.commission);
    }
  };

  return (
    <Container>
      <Header />
      <Content>
        <Form>
          <Item>
            <Input
              placeholder="coin name"
              onChangeText={(text) => setName(text)}
            />
          </Item>
          <Item>
            <Input
              placeholder="number of coins"
              onChangeText={(text) => updateDetails(text, "count")}
            />
          </Item>
          <Item>
            <Input
              placeholder="Amount Invested"
              value={state.amount}
              onChangeText={(text) => updateDetails(text, "amount")}
            />
          </Item>

          <Item last>
            <Input
              placeholder="coin price"
              onChangeText={(text) => updateDetails(text, "price")}
            />
          </Item>
        </Form>
        <Text>Commission: {state.commission}</Text>
        <Text>Total Amount: {state.commission + state.amount}</Text>
      </Content>
    </Container>
  );
}

共有2个答案

狄望
2023-03-14

您需要有单独的函数来根据输入值进行计算,如

const updatePrice = (value) => {
  if (count) {
    setPrice(value);
    setAmount(value * count);
    setCommission(value * count * 0.02); // do not use amount here directly as it is only calculated in the next render cycle
  }
}

在输入字段中,将onChange-method更改为onChangeText={updatePrice}

顺便说一下,您可以删除(文本)=

扈德容
2023-03-14

我就是这么做的

import React, { Component, useState, useEffect, useRef } from "react";
import {
  Container,
  Header,
  Content,
  H1,
  Text,
  Form,
  Item,
  Input,
} from "native-base";

export default function createCoins() {
  const [name, setName] = useState("");
  const [amount, setAmount] = useState("");
  const [count, setCount] = useState("");
  const [price, setPrice] = useState("");
  const [commission, setCommission] = useState("");
  // used to regulate when calculations are made
  const [ focusedInput, setFocus ] = useState(null)

  // run an effect when price, count, or amount changes
  useEffect(()=>{
    // if price and count exist and user isnt changing amount, calculate amount
    if(price && count && focusedInput !== 'amount'){
      setAmount( price * count );
    }
    // if price and count exist and user isnt changing count, calculate count
    else if(price && amount && focusedInput !== 'count'){
      setCount( amount / price )
    }
  },[price,count,amount])
  // when amount changes, update commission and total
  useEffect(()=>{
    if(isNaN(amount))
      setCommission('')
    if(amount)
      setCommission( amount * 0.002);
  },[amount])
  
  return (
    <Container>
      <Header />
      <Content>
        <Form>
          <Item>
            <Input
              placeholder="coin name"
              onChangeText={setName}
              keyboardType="decimal-pad"
            />
          </Item>
          <Item>
            <Input
              placeholder="number of coins"
              onChangeText={text => setCount(parseFloat(text))}
              keyboardType="decimal-pad"
              value={count.toString()}
              onFocus={()=>setFocus("count")}
            />
          </Item>
          <Item>
            <Input
              placeholder="Amount Invested"
              onChangeText={text => setAmount(parseFloat(text))}
              keyboardType="decimal-pad"
              value={amount.toString()}
              onFocus={()=>setFocus("amount")}
            />
          </Item>

          <Item last>
            <Input
              placeholder="coin price"
              onChangeText={text=>setPrice(parseFloat(text))}
              keyboardType="decimal-pad"
              value={price.toString()}
              onFocus={()=>setFocus("price")}

            />
          </Item>
        </Form>
        <Text>Commission: {commission}</Text>
        <Text>Total Amount: {commission +amount}</Text>
      </Content>
    </Container>
  );
}

focusedInput的存在是为了防止在聚焦(被更改)时自动计算某个值。如果没有focusedInput条件,如果存在pricecountamount,那么即使您试图更改第三个值,第三个值也会从这两个值中派生出来。

例如,如果您尝试在存在price的情况下编辑Count文本输入字段,则在您输入下一个字符之前,Count文本字段将被setCount(量/价格)覆盖。

在自动计算字段值之前,通过验证字段未处于焦点,可以避免这种不希望出现的效果

 类似资料:
  • 假设我有两个字段F1和f2。我想将F1更新为。我可以在Mongo中使用一个更新命令吗?

  • 问题内容: 如何更新字段以增加现有价值? 例如我有 表名: 有没有一种方法可以简单地为信用增加价值? 喜欢 我想将7加到4,以便credit = 11,其中id =‘1’ ,该怎么做? 问题答案:

  • 我在项目中使用Crudepository进行数据库操作。当我使用由Spring实现的保存方法更新持久化数据时,其他字段将被覆盖。例如,我只发送firstName进行更新,但lastName被转换为空字段。 简单地说,我用这样的实体调用保存方法: 我正在将此JSON发送到更新方法: Spring 将此 JSON 转换为 Rest api endpoint的成员。成员.java是: 如何防止覆盖其他字

  • 问题内容: 我有一个Golang程序,该程序从命令行读取字符串参数,并将其传递给fmt.Sprintf函数。假设tmp_str是命令行中的目标字符串。 在某些情况下,该程序将传递完整的字符串,例如“ Hello Friends”,而不是字符串模板。.程序会惊慌并返回: 你好朋友%!(EXTRA string = world) 因此,如何忽略fmt.Sprintf的额外字段? 问题答案: 是的,您可

  • 问题内容: 是否可以获取字段的当前值,将其用作计算中的变量,然后根据结果更新字段? 例如,表1中ID为“ 1”的记录的值为“ 2” 问题答案: 对于具有等于“ 1”的列的任何行,这会将列设置为同一行的列(加1)的值: