在字段更改时设置输入字段的值

Question

在应用程序中，我必须从Input Value字段获取值，并将Input Value字段的值设置为Set Value字段。当Input Value发生变化时，触发函数Change，并将值分配给变量。变量v在Set Value字段中用于设置输入的值。

未在Set Value字段上设置值。

我准备了一个codesandbox.io来说明我遇到的问题。

export default function App() {
let v = "0.00";
function onChange(event) {
v = event.target.value;
}
return (
<div className="App">
<label>Input Value</label>&nbsp;&nbsp;
<input
type="number"
step="0.01"
placeholder="0.00"
onChange={(e) => onChange(e)}
/>
<br />
<br />
<label>Set Value</label>&nbsp;&nbsp;
<input value={v} type="number" step="0.01" placeholder="0.00" readOnly />
</div>
);
}

Answer 1

您应该调用useState来更新重新渲染时的值

export default function App() {
const [value, setValue] = useState("0.00") //call useState to re-render UI as well as get new values
function onChange(event) {
setValue(event.target.value) //update your value here
}
return (
<div className="App">
<label>Input Value</label>&nbsp;&nbsp;
<input
type="number"
step="0.01"
placeholder="0.00"
onChange={onChange}
/>
<br />
<br />
<label>Set Value</label>&nbsp;&nbsp;
<input value={value} type="number" step="0.01" placeholder="0.00" readOnly />
</div>
);
}

Answer 2

当您想要跟踪React组件中在渲染之间持续存在的数据时，您需要使用state(或ref或其他模式，但state最适合您的情况(。

新的React测试版文档有一个关于管理状态的精彩部分：https://beta.reactjs.org/learn/reacting-to-input-with-state

你会想做一些类似的事情：

export default function App() {
const [v, setV] = useState(undefined);
return (
<div className="App">
<label>Input Value</label>&nbsp;&nbsp;
<input
type="number"
step="0.01"
placeholder="0.00"
onChange={(e) => setV(e.target.value)}
/>
<br />
<br />
<label>Set Value</label>&nbsp;&nbsp;
<input value={v} type="number" step="0.01" placeholder="0.00" readOnly />
</div>
);
}