onChange 监视用户从 Office-UI-Fabric 在每个渲染器中输入到 TextField 组件并显示不正确的输出

Question

我正在尝试实施 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 的新手，如有任何帮助，我们将不胜感激。

Answer 1

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])

onChange 监视用户从 Office-UI-Fabric 在每个渲染器中输入到 TextField 组件并显示不正确的输出

onChange monitoring user input into TextField component from Office-UI-Fabric on every render and displaying incorrect output

office-ui-fabric

react-tsx

react-hooks