问题：

如何基于字段值以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条件，如果存在price和count或amount，那么即使您试图更改第三个值，第三个值也会从这两个值中派生出来。

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

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

类似资料：

基于其他文本字段输入填充文本字段初始值
在mongo中基于另一个字段的值更新文档字段

假设我有两个字段F1和f2。我想将F1更新为。我可以在Mongo中使用一个更新命令吗？
如何更新字段以增加现有价值？

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

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

问题内容：我有一个Golang程序，该程序从命令行读取字符串参数，并将其传递给fmt.Sprintf函数。假设tmp_str是命令行中的目标字符串。在某些情况下，该程序将传递完整的字符串，例如“ Hello Friends”，而不是字符串模板。.程序会惊慌并返回：你好朋友％！（EXTRA string = world）因此，如何忽略fmt.Sprintf的额外字段？问题答案：是的，您可
如何在MySQL中根据其当前值更新字段？

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

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档