onChange 监视用户从 Office-UI-Fabric 在每个渲染器中输入到 TextField 组件并显示不正确的输出
onChange monitoring user input into TextField component from Office-UI-Fabric on every render and displaying incorrect output
我正在尝试实施 UI,我通过 Office-ui-fabric 的 TextField 组件获取用户输入。我使用 onChange 来监控价值。但是,当我输入用户输入时说数字“100”,我可以看到每次呈现的函数,我相信这是 onChange 的一个功能,但是在完成输入后,我在控制台中只看到“10”window.
我尝试按照旧 Whosebug post 中的建议将 onChange 更改为 Blur,但是当我这样做时,我没有看到任何控制台消息。
const [msg, setMsg] = React.useState("");
React.useEffect(()=>{
vscode.postMessage(
{
command: 'setMsg',
text: msg
}
);
},[msg])
return (
<div>
<Stack>
<Stack.Item grow>
<Label style={{ color: 'white' }}>Enter number </Label>
<TextField placeholder="Enter number of images" value={msg} onChange={event => { setMsg((event.target as HTMLInputElement).value); console.log(msg);test() }} />
</Stack.Item>
</Stack>
</div>
);
我希望如果我输入数字“100”,我应该会在控制台日志中看到“100”。目前我看到'10'。这是实现此功能的正确方法吗? React 和 office -ui-fabric 的新手,如有任何帮助,我们将不胜感激。
setState
in React
是 async
并且需要一些时间来执行/更新状态。
当你这样做时,
onChange={event => {
setMsg((event.target as HTMLInputElement).value);
console.log(msg);
test()
}}
在 setState
之后,您正在尝试访问结果只会为您提供先前状态的状态。
要查看实际效果,请从 onChange
中删除此 console.log
并使用 useEffect
挂钩。由于您已经有 useEffect
将在 msg
更改时执行,您只需要在其中添加 console.log(msg)
行。
React.useEffect(()=>{
console.log(msg); // Now you will get updated value every time.
vscode.postMessage(
{
command: 'setMsg',
text: msg
}
);
},[msg])
我正在尝试实施 UI,我通过 Office-ui-fabric 的 TextField 组件获取用户输入。我使用 onChange 来监控价值。但是,当我输入用户输入时说数字“100”,我可以看到每次呈现的函数,我相信这是 onChange 的一个功能,但是在完成输入后,我在控制台中只看到“10”window.
我尝试按照旧 Whosebug post 中的建议将 onChange 更改为 Blur,但是当我这样做时,我没有看到任何控制台消息。
const [msg, setMsg] = React.useState("");
React.useEffect(()=>{
vscode.postMessage(
{
command: 'setMsg',
text: msg
}
);
},[msg])
return (
<div>
<Stack>
<Stack.Item grow>
<Label style={{ color: 'white' }}>Enter number </Label>
<TextField placeholder="Enter number of images" value={msg} onChange={event => { setMsg((event.target as HTMLInputElement).value); console.log(msg);test() }} />
</Stack.Item>
</Stack>
</div>
);
我希望如果我输入数字“100”,我应该会在控制台日志中看到“100”。目前我看到'10'。这是实现此功能的正确方法吗? React 和 office -ui-fabric 的新手,如有任何帮助,我们将不胜感激。
setState
in React
是 async
并且需要一些时间来执行/更新状态。
当你这样做时,
onChange={event => {
setMsg((event.target as HTMLInputElement).value);
console.log(msg);
test()
}}
在 setState
之后,您正在尝试访问结果只会为您提供先前状态的状态。
要查看实际效果,请从 onChange
中删除此 console.log
并使用 useEffect
挂钩。由于您已经有 useEffect
将在 msg
更改时执行,您只需要在其中添加 console.log(msg)
行。
React.useEffect(()=>{
console.log(msg); // Now you will get updated value every time.
vscode.postMessage(
{
command: 'setMsg',
text: msg
}
);
},[msg])