前面文章我们介绍了fusionUI表单组件的使用,这里有一些不补充,假如我们的表单填写工程中,需要实时操作一些值,或者说是实时获取某些输入项的值,该如何操作呢?有如下集中方案,监听每个组件的change事件,组件变动即可得到变化的值。
还有一种方式,是fusion为我们提供的,我们可以向Form表单传递一个参数,这个参数上篇文章没有提高,这里做个补充,什么参数呢?那就是value属性和onChange函数,chang函数监听表单每个元素的变化,然后重新赋值给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="公司封面" 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">
更新公司logo
</Button>
</Upload>
</FormItem>
<Box>
<p>* logo尽量上传超过 80px*80px, 但不要太大了。</p>
<p>* 请上传两倍图保证清晰度</p>
</Box>
</Box>
</Cell>
</ResponsiveGrid>
</FormItem>
<FormItem label="公司名称" required requiredMessage="必填" colSpan={12}>
<Input placeholder="请输入公司名称" name="companyName" />
</FormItem>
<FormItem label="公司创建时间" required requiredMessage="必填" colSpan={12}>
<Input placeholder="请输入公司公司创建时间" name="createAt" />
</FormItem>
<FormItem label="公司编号" required requiredMessage="必填" colSpan={12}>
<Input placeholder="请输入公司编号" name="companyId" />
</FormItem>
{preview ? (
<FormItem colSpan={12}>
<Button
style={{ marginRight: '20px' }}
type="primary"
onClick={() => {
setPreview(false);
}}
>
编辑
</Button>
</FormItem>
) : (
<FormItem colSpan={12}>
<Button
style={{ marginRight: '20px' }}
type="primary"
onClick={() => {
setPreview(true);
}}
>
取消
</Button>
<Form.Submit type="primary" onClick={onSubmit} >
保存
</Form.Submit>
</FormItem>
)}
</Form>
</Box>
</Card.Content>
</Card>
);
};
export default SettingSystemBlock;
代码中,我们监听了postdata的image属性,当表单中的上传了图片组件时,chang执行,postdata变化,图片实时显示。
这样,当触发submit事件时,我们既可以从函数的参数获取表单的值,也可以从postdata获取值。
以上便是fusionUI上传组件的补充,希望对你有所帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。