#HiddenInputWidget 隐藏字段

import { useState } from "react";
import { ButtonInput, FieldLayout, FormLayout, HiddenInputWidget } from "ooui-react";

function App() {
  const [submitted, setSubmitted] = useState("");

  return (
    <div style={{ maxWidth: 420 }}>
      <FormLayout
        onSubmit={(event) => {
          event.preventDefault();
          const pairs: string[] = [];
          new FormData(event.currentTarget).forEach((value, key) => {
            pairs.push(`${key}=${value}`);
          });
          setSubmitted(pairs.join(" & "));
        }}
      >
        <HiddenInputWidget name="pageId" value="4711" />
        <HiddenInputWidget name="traceId" value="keep-me" />
        {/* 禁用的隐藏字段不随表单提交 */}
        <HiddenInputWidget name="draft" value="ignored" disabled />
        <FieldLayout label=" ">
          <ButtonInput type="submit">提交</ButtonInput>
        </FieldLayout>
        {submitted && <div>提交内容：{submitted}</div>}
      </FormLayout>
    </div>
  );
}

export default App;