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

Question

我目前正在使用 React 开发 Microsoft Addin。我已将 TextField 添加到 AddIn。但是我无法从输入中获取值，因为 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("");

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

What is the Alternative for Form Tag in React Fluent-UI?

office-addins

node.js

reactjs

office-js

fluentui-react