0

fluentui上有一个漂亮的基于模式的表单组件

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;

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

4

1 回答 1

2

我最终梳理了库组件（表单输入和复选框），看看是什么让它们打勾。

这就是我最终的结果。如果将来有其他人偶然发现此问题，请随时对其进行改进。

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

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

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;
于 2020-05-19T05:26:29.223 回答