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

I am currently developing Microsoft Addin with react. I have added TextField to the AddIn. But I couldn't get the value from inputs because there is no Form tag in fluent-ui.

What can I do to resolve this?

This is the component.

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

CodePudding user response：

I don't know if it is the best way to solve you're problem, but you can add a value to each TextField that is linked to a prop in your component, like that :

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

The onChange handler reset the prop the user is modifying. Don't forget to declare userName and passWord via the useState hook :

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