Reactjs 如何存储Fluent UI表单字段的值？

我正在使用fluent ui northstar的文档

import { Form, Button, Input } from '@fluentui/react-northstar';

const fields = [
  {
    label: 'First name',
    name: 'firstName',
    id: 'first-name-shorthand',
    key: 'first-name',
    required: true,
    control: {
      as: Input,
      showSuccessIndicator: false,
    },
  },
  {
    label: 'Last name',
    name: 'lastName',
    id: 'last-name-shorthand',
    key: 'last-name',
    required: true,
    control: {
      as: Input,
      showSuccessIndicator: false,
    },
  },
  {
    label: 'I agree to the Terms and Conditions',
    control: { as: 'input' },
    type: 'checkbox',
    id: 'conditions-shorthand',
    key: 'conditions',
  },
  { control: { as: Button, content: 'Submit' }, key: 'submit' },
];

const FormExample = () => (
  <Form
    onSubmit={() => {
      alert('Form submitted');
    }}
    fields={fields}
  />
);

export default FormExample;

从'@fluentui/react northstar'导入{表单、按钮、输入}；
常量字段=[
{
标签：“名字”，
姓名：'firstName'，
id:‘名字速记’，
关键字：“名字”，
要求：正确，
控制：{
as：输入，
showSuccessIndicator:错误，
},
},
{
标签：“姓氏”，
名称：“lastName”，
id:‘姓速记’，
键：“姓氏”，
要求：正确，
控制：{
as：输入，
showSuccessIndicator:错误，
},
},
{
标签：“我同意条款和条件”，
控件：{as:'input'}，
键入：“复选框”，
id:“条件速记”，
关键：“条件”，
},
{控件：{as:按钮，内容：'Submit'}，键：'Submit'}，
];
const FormExample=（）=>(
{
警报（“提交的表格”）；
}}
字段={fields}
/>
);
导出默认格式示例；

我不知道如何为表单字段中设置的值设置状态值，我尝试了设置onChange函数，但它给了我一个错误，说找不到它