我有 4 个输入字段,如下所示。名称、数量、数量、价格。还有两个文本字段,佣金和总计。
如果用户按价格输入值并计数,则应计算金额(价格 * 计数)。如果用户以价格和金额输入值,则应计算计数(金额/价格)。在这两种情况下,commission=0.02*amount 和 total=amount+commission 都应该更新。
因此,我尝试使用下面的代码片段作为根据价格更新金额和佣金的开始。但它没有更新。
//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 />;
}
//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>
);
}
你能建议一下吗?
如下更改 createCoin.jsx 的代码后。文本字段“总金额”正在更新,但如何更新输入字段金额?我尝试向它添加属性 value={state.amount} 但没有像无效道具一样出现错误。
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>
);
}