从@fluentui/react-northstar@0.48.0 读取表单组件

Question

上有一个基于模式的漂亮 Form 组件

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

const fields = [
  {
    label: 'First name',
    name: 'firstName',
    id: 'first-name-shorthand',
    key: 'first-name',
    required: true,
  },
  {
    label: 'Last name',
    name: 'lastName',
    id: 'last-name-shorthand',
    key: 'last-name',
    required: true,
  },
  {
    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;

但他们不提供任何 method/example 来收集我所知道的数据。（至少不在文档中）。我可以从 onSubmit 事件中收集大部分值，但它变得很麻烦，因为并非所有 html 组件都必须是具有 value 属性的输入元素。我也不认为这是这样做的预期方式。任何人都可以启发我吗？我认为您必须能够以某种方式将 onChange 函数提供给它。或者我应该在每个字段对象中添加 onChange 函数？

Answer 1

我最终梳理了库组件（Forms Input 和 Checkbox），看看是什么让它们打勾。

这就是我最终得到的。如果将来有人偶然发现这个问题，请随时改进它。

注意使用属性defaultValue和defaultChecked分别设置Input和Checkbox组件的初始值。 onChange 事件为 Input 组件传递 name 和 value 参数，为 Checkbox 组件传递 name 和 checked 参数。

如果您希望复选框标签出现在复选框旁边，则复选框标签必须位于控件内部，否则它将出现在复选框上方。

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

class Login extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit.bind(this)
  }
  state = {
    email: "",
    password: "",
    remember_me: true
  }
  fields = [
    {
      label: 'Email',
      name: 'email',
      id: 'email-inline-shorthand',
      key: 'email',
      required: true,
      inline: true,
      type: 'email',
      control: {
        as: Input,
        defaultValue: this.state.email,
        onChange: (e, { name, value }) => this.setState({ ...this.state, [name]: value })
      }
    },
    {
      label: 'Password',
      name: 'password',
      id: 'password-inline-shorthand',
      key: 'password',
      required: true,
      inline: true,
      type: 'password',
      control: {
        defaultValue: this.state.password,
        onChange: (e, { name, value }) => this.setState({ ...this.state, [name]: value }),
        as: Input,
      }
    },
    {
      name: "remember_me",
      key: 'remember_me',
      id: 'remember_me-inline-shorthand',
      type: 'boolean',
      control: {
        label: 'Remember me',
        as: Checkbox,
        defaultChecked: !!this.state.remember_me,
        onChange: (e, { name, checked }) => { this.setState({ ...this.state, [name]: checked }) }
      },
    },
    {
      control: {
        as: Button,
        content: 'Submit',
      },
      key: 'submit',
    },
  ]

  handleSubmit = (e) => {
    console.log("submitting these values", this.state)
  }

  render() {
    return (
      <Form
        onSubmit={this.handleSubmit}
        fields={this.fields}
      />
    )
  }
};

export default Login;

从@fluentui/react-northstar@0.48.0 读取表单组件

read the Form component from @fluentui/react-northstar@0.48.0

reactjs

office-ui-fabric

office-ui-fabric-react

fluent-ui