Supplement to fusionui form component

In the previous article, we introduced fusionUI The use of form components , There are some things that are not added here , If our form is filled in the project , Some values need to be manipulated in real time , Or get the value of some input items in real time , How to operate ？ There are the following centralized schemes , Listen for change event , Change the component to get the changed value .

There's another way , yes fusion For us , We can approach Form The form passes a parameter , This parameter was not improved in the previous article , Here's a supplement , What are the parameters ？ That's it value Properties and onChange function ,chang Function to listen for changes in each element of the form , And then reassign it to value：

import * as React from 'react';
import {
  Avatar,
  Card,
  Tab,
  ResponsiveGrid,
  Table,
  Typography,
  Upload,
  Button,
  Form,
  Input,
  Message,
  Box,
  Radio,
  Dialog,
  Icon,
} from '@alifd/next';
import styles from './index.module.css';

const { useState, useEffect } = React;
const { Cell } = ResponsiveGrid;
const FormItem = Form.Item;

const SettingSystemBlock = (props) => {
  const [initialized, setInitialize] = useState(false);
  const [preview, setPreview] = useState(true);
  const [postData, setValue] = useState({});
  useEffect(() => {
    setInitialize(true);
  }, [initialized]);

  const formChange = (values) => {
    setValue(values);
  };

  const onSubmit = (values, errors) => {
    console.log('values:', values);
    console.log('postData:', postData);
  };

  return (
    <Card free>
      <Card.Content className={styles.settingPersonBlock}>
        <Box className={styles.baseSettingContainer}>
          <Form
            isPreview={preview}
            className={styles.baseSetting}
            value={postData}
            labelAlign="top"
            onChange={formChange}
            responsive
          >
            <FormItem label=" Company cover " colSpan={12}>
              <ResponsiveGrid gap={10}>
                <Cell colSpan={2}>
                  <Avatar 
                  src={postData.image&&`http://alfuser.quchangguan.cn/${postData.image[0].url}`}
                  shape="circle" size={64} icon="account" />
                </Cell>
                <Cell colSpan={10} className={styles.changeLogo}>
                  <Box spacing={12}>
                    <FormItem>
                      <Upload
                        limit={1}
                        formatter={(res) => {
                          return {
                            success: true,
                            url: res.data.result.mid,
                          };
                        }}
                        action="/api/alf/image/upload2"
                        // name="image"
                      >
                        <Button className={styles.uploadButton} type="primary">
                           Update company logo
                        </Button>
                      </Upload>
                    </FormItem>
                    <Box>
                      <p>* logo Try to upload more than  80px*80px,  But don't be too big .</p>
                      <p>*  Please upload a double image to ensure clarity </p>
                    </Box>
                  </Box>
                </Cell>
              </ResponsiveGrid>
            </FormItem>
            <FormItem label=" Corporate name " required requiredMessage=" Required " colSpan={12}>
              <Input placeholder=" Please enter the company name " name="companyName" />
            </FormItem>

            <FormItem label=" When the company was founded " required requiredMessage=" Required " colSpan={12}>
              <Input placeholder=" Please enter the company creation time " name="createAt" />
            </FormItem>

            <FormItem label=" Company number " required requiredMessage=" Required " colSpan={12}>
              <Input placeholder=" Please enter company number " name="companyId" />
            </FormItem>

            {preview ? (
              <FormItem colSpan={12}>
                <Button
                  style={{ marginRight: '20px' }}
                  type="primary"
                  onClick={() => {
                    setPreview(false);
                  }}
                >
                   edit 
                </Button>
              </FormItem>
            ) : (
              <FormItem colSpan={12}>
                <Button
                  style={{ marginRight: '20px' }}
                  type="primary"
                  onClick={() => {
                    setPreview(true);
                  }}
                >
                   Cancel 
                </Button>
                <Form.Submit type="primary" onClick={onSubmit} >
                   preservation 
                </Form.Submit>
              </FormItem>
            )}
          </Form>
        </Box>
      </Card.Content>
    </Card>
  );
};

export default SettingSystemBlock;

In the code , We monitored postdata Of image attribute , When the picture component in the form is uploaded ,chang perform ,postdata change , Real time picture display .

such , When triggered submit When an event is , We can get the value of the form from the parameter of the function , You can also get it from postdata Get value .

The above is fusionUI Supplement to upload components , I hope it helped you .