React Fluent-UI 中表单标签的替代方案是什么？

【问题标题】：What is the Alternative for Form Tag in React Fluent-UI?React Fluent-UI 中表单标签的替代方案是什么？
【发布时间】：2023-04-11 07:24:01
【问题描述】：

我目前正在使用 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>

【问题讨论】：

标签： node.js reactjs office-js office-addins fluentui-react

【解决方案1】：

我不知道这是否是解决您问题的最佳方法，但您可以为每个与组件中的 prop 链接的 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("");

【讨论】：