Javascript 如何根据字段值以React Native的形式更新其他字段？

我有4个输入字段，如下所示。 姓名、数量、金额、价格。 和两个文本字段，佣金和总额

如果用户在价格和计数时输入值，则应计算金额（价格*计数）。 如果用户以价格和金额输入值，则应计算计数（金额/价格）。 在这两种情况下，应更新佣金=0.02*金额和总额=金额+佣金

所以，我试着从下面的代码片段开始，根据价格更新金额和佣金。 但它并没有更新

//App.js

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

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

从“React”导入React；
从“/src/screens/createCoin.jsx”导入App1；
从“expo字体”导入*作为字体；
导出默认函数App（）{
return
您需要有单独的函数根据输入值进行计算，如

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方法更改为
onChangeText={updatePrice}

顺便说一句，您可以删除
（text）=>
，因为onChangeText的签名（参数）和方法是相同的。否则，您将在每个渲染上创建函数的实例。这是为了性能/内存优化。
下面是我所做的

import React，{Component，useState，useffect，useRef}来自“React”；
进口{
集装箱，
标题，
内容,，
H1，
文本，
形式，
项目,，
输入，
}来自“本土基地”；
导出默认函数createCoins（）{
const[name，setName]=useState（“”）；
const[amount，setAmount]=useState（“”）；
const[count，setCount]=useState（“”）；
const[price，setPrice]=使用状态（“”）；
const[commission，setCommission]=使用状态（“”）；
//用于调整进行计算的时间
常量[focusedInput，setFocus]=useState（null）
//当价格、计数或金额发生变化时运行效果
useffect（（）=>{
//如果存在价格和计数，且用户未更改金额，请计算金额
如果（价格、数量和焦点投入！=‘金额’）{
设定金额（价格*数量）；
}
//如果存在价格和计数，且用户未更改计数，请计算计数
else if（价格、金额和焦点输入！==‘计数’）{
设置计数（金额/价格）
}
}，[价格、数量、金额]）
//当金额发生变化时，更新佣金和总额
useffect（（）=>{
如果（isNaN（金额））
设定佣金（“”）
如果（金额）
设定佣金（金额*0.002）；
}，[金额]）
返回(
setCount（parseFloat（text））}
keyboardType=“十进制键盘”
值={count.toString（）}
onFocus={（）=>setFocus（“count”）}
/>
setAmount（parseFloat（text））}
keyboardType=“十进制键盘”
值={amount.toString（）}
onFocus={（）=>setFocus（“金额”）}
/>
setPrice（parseFloat（text））}
keyboardType=“十进制键盘”
value={price.toString（）}
onFocus={（）=>setFocus（“price”）}
/>
委员会：{委员会}
总额：{佣金+金额}
);
}

focusedInput
的存在是为了防止在聚焦（被更改）时自动计算某个值。如果没有
focusedInput
条件，如果存在
price
和
count
或
amount
，则第三个值将从这两个值派生，即使您尝试更改第三个值

例如，如果在
price
和
amount
存在时试图编辑
count
textInput字段，则在键入下一个字符之前，
count
textfield将被
setCount（amount/price）
覆盖

在自动计算字段值之前，通过验证字段未处于焦点，可以避免这种不希望出现的影响
I treid this，但仍然不会更新。我的代码和您的更改：这只是一个示例，您必须根据输入设置所有值。我已修改我的答案。是的，状态中的值正在更新，但金额的文本字段未更新。我尝试设置value属性，但将error设置为无效属性。您需要将字符串转换为数字，反之亦然，以便使用它进行计算并在文本字段中显示。本机base可能需要字符串，但您需要使用数字进行计算。对于错误消息，您应该显示完整的消息，因为它显示计算没有问题。它正在更新文本字段（最后两个），正如我现在添加的上图所示。但是，输入字段值“投资金额”没有得到更新。我尝试将value、defaultValue设置为{state.amount}，但没有更改数据。我很乐意提供帮助，但我很难运行本机base OK，因此安装新版本对我来说几乎是不可能的，但返回到2.13工作您的更改将对象作为状态，但是每次都需要设置完整的对象。您应该像以前一样将值作为单独的状态变量保留
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>
  );
}

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
  }
}