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

Question

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

而且我无法弄清楚如何为表单字段中设置的值设置状态值，我尝试设置 onChange 函数，它给了我一个错误，说它没有找到。