如何根据另一个字段在反应中更新？
如何根据另一个字段在反应中更新？
提问于 2022-03-18 22:57:53
我有两个用于交换接口的输入字段。目标是根据输入(基于汇率)更新另一个输入。用户可以输入任何一个。
问题是:如果用户输入5并在另一个中获得500，那么他们从500中删除两个0，它将无法获得状态更新并在另一个中返回0.05。
为了使可视化更容易，我在码箱中使用了它。下面是密码。
import "./styles.css";
import React from "react";
export default function App() {
const rate = 100;
const [token, setToken] = React.useState();
const [eth, setEth] = React.useState();
console.log("token", token);
console.log("eth", eth);
return (
<div className="App">
<h1>1 eth = 100 token</h1>
<h2>goal: change one input, the other updates automatically</h2>
<input
placeholder="eth"
value={eth}
onChange={(e) => {
let eth_input = e.target.value;
console.log(eth_input);
setToken(eth_input * rate);
}}
/>
<input
placeholder="token"
value={token}
onChange={(e) => {
let token_input = e.target.value;
console.log(token_input);
setEth(token_input / rate);
}}
/>
</div>
);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-18 23:29:32
代码的问题是，您的两个输入都是(至少一开始是无控制输入 )。当我运行原始代码框时，当您编辑任何一个字段时，都会有一条控制台消息警告您。
这是因为尽管输入从状态获取它们的值，但是它们的更改处理程序没有用输入值更新相同的状态。您正在更新其他输入的状态，但没有更新这些输入本身。
添加下面突出显示的两行(每个事件处理程序中有一行)修复了这个问题，据我所知，这使事情按照您的意图发挥作用：
import "./styles.css";
import React from "react";
export default function App() {
const rate = 100;
const [token, setToken] = React.useState();
const [eth, setEth] = React.useState();
console.log("token", token);
console.log("eth", eth);
return (
<div className="App">
<h1>1 eth = 100 token</h1>
<h2>goal: change one input, the other updates automatically</h2>
<input
placeholder="eth"
value={eth}
onChange={(e) => {
let eth_input = e.target.value;
console.log(eth_input);
setEth(eth_input); // <-- add this
setToken(eth_input * rate);
}}
/>
<input
placeholder="token"
value={token}
onChange={(e) => {
let token_input = e.target.value;
console.log(token_input);
setToken(token_input); // <-- and this
setEth(token_input / rate);
}}
/>
</div>
):
}Stack Overflow用户
发布于 2022-03-18 23:27:01
<input
placeholder="eth"
value={eth}
onChange={(e) => {
let eth_input = e.target.value;
console.log(eth_input);
setEth(eth_input)
setToken(eth_input * rate);
}}
/>
<input
placeholder="token"
value={token}
onChange={(e) => {
let token_input = e.target.value;
console.log(token_input);
setToken(token_input)
setEth(token_input / rate);
}}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71533984
复制相关文章
相似问题
腾讯云开发者
