React Fluent UI中表单标记的替代方案是什么

Question

我目前正在使用react开发Microsoft Addin。我已将TextField添加到外接程序中。但我无法从输入中获取值，因为fluent ui中没有Form标记。

我能做些什么来解决这个问题？

这就是组件。

<Stack>
<TextField placeholder="User Name" />
<TextField placeholder="Password" type="password" />
<PrimaryButton className="ms-welcome__action" iconProps={{ iconName: "ChevronRight" }}>
Sign In
</PrimaryButton>
</Stack>

Answer 1

我不知道这是否是解决问题的最佳方法，但您可以为链接到组件中道具的每个TextField添加一个值，如下所示：

<Stack>
<TextField placeholder="User Name" value={userName} onChange={(e) => setUserName(e.target.value)} />
<TextField placeholder="Password" type="password" value={passWord} onChange={(e) => setPassWord(e.target.value)} />
<PrimaryButton className="ms-welcome__action" iconProps={{ iconName: "ChevronRight" }}>
Sign In
</PrimaryButton>
</Stack> 

onChange处理程序重置用户正在修改的道具。不要忘记通过useState钩子声明userName和passWord：

const [userName, setUserName] = useState("");
const [passWord, setPassWord] = useState("");