我有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>
);
}
您需要有单独的函数来根据输入值进行计算,如
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}
。
顺便说一下,您可以删除(文本)=
我就是这么做的
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(量/价格)
覆盖。
在自动计算字段值之前,通过验证字段未处于焦点,可以避免这种不希望出现的效果
假设我有两个字段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)的值: