fusionUI组件表单的使用
原创
1、展示最简单的案例
react的fusionUi组件提供了大量的封装好的组件，为开发人员节省了大量的时间，今天主要分享一下如何使用fusionUI的form表单组件，看一下最简单的例子：
import { Form, Input, Checkbox } from '@alifd/next';
const FormItem = Form.Item;
const formItemLayout = {
labelCol: {
fixedSpan: 8
},
wrapperCol: {
span: 14
}
};
class Demo extends React.Component {
handleSubmit = (values, errors) => {
console.log('value & errors', values, errors);
};
render() {
return (
<Form style={{width: '60%'}} {...formItemLayout} colon>
<FormItem name="baseUser" label="Username" required requiredMessage="Please input your username!">
<Input />
</FormItem>
<FormItem name="basePass" label="Password" required requiredMessage="Please input your password!">
<Input.Password placeholder="Please Enter Password"/>
</FormItem>
<FormItem name="email" label="Email" format="email" requiredMessage="Please input your email!">
<Input placeholder="Please Enter Email"/>
</FormItem>
<FormItem name="phone" label="Phone Number" format="tel">
<Input placeholder="Please Enter phone number"/>
</FormItem>
<FormItem name="homepage" label="Homepage" format="url">
<Input defaultValue="https://" placeholder="e.g. https://www.taobao.com"/>
</FormItem>
<FormItem name="agreement" label=" " colon={false}>
<Checkbox defaultChecked>Agree</Checkbox>
</FormItem>
<FormItem label=" " colon={false}>
<Form.Submit type="primary" validate onClick={this.handleSubmit} style={{marginRight: 8}}>Submit</Form.Submit>
<Form.Reset>Reset</Form.Reset>
</FormItem>
</Form>
);
}
}
ReactDOM.render(<Demo />, mountNode);从代码中我们可以看出，每一个表单元素都被包裹在FormItem组件中，FormItem比较重要的两个属性是name和labei，name是表单元素的键，label是显示的label标签，另外FormItem还可以配置required和requiredMessage两个属性，前者表示当前元素是必填项，如果不填写会提示requiredMessage中的信息。
2、FormItem的常用属性
查看文档发现FormItem还有其他可以配置的属性，但是我常用的只有上面介绍的四个：name、label、required、requiredMessage。
3、Form的常用属性
再来看一下Form的属性，代码中只有colon属性，这个属性是控制是否显示label后面的冒号的，还有其他几个常用的我们来看下：
size是枚举类，控制表单的组件的大小。
3.1、isPreview的使用
isPreview控制表单的编辑状态与预览状态，这个在开发中十分常用，看两个界面：
编辑状态：
如何在这两种状态中切换呢？这时候就需要isPreview这属性了，只要控制这个属性，就能让表单在两种状态随意切换，上面的页面我们是通过点击编辑按钮来控制的，代码如下：
import React, { useState, useEffect } from 'react';
import { getDeviceById, updateDevice } from '@/services/repo';
import {
Button,
Field,
Box,
Input,
Table,
Card,
Pagination,
Message,
Form,
Switch,
Range,
Dialog,
Checkbox,
Select,
} from '@alifd/next';
import BasicDetail from './components/BasicDetail';
const { Header, Content, Divider } = Card;
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
labelCol: {
fixedSpan: 10,
},
wrapperCol: {
span: 14,
},
};
// 1 人脸白名单
// 2 人脸白名单+M1 核验
// 3 人证核验
// 4 人脸白名单或者 刷卡开门
// 5 本地+服务器比对
// 6 人脸或人证
// 7 人脸或二维码
const Modes = [
{
value: 1,
label: '人脸白名单',
},
{
value: 2,
label: '人脸白名单+M1核验',
},
{
value: 3,
label: '人证核验',
},
{
value: 4,
label: '人脸白名单或者刷卡开门',
},
{
value: 5,
label: '本地+服务器比对',
},
{
value: 6,
label: '人脸或人证',
},
{
value: 7,
label: '人脸或二维码',
},
];
function Detail(props) {
const { id } = props.match.params;
// eslint-disable-next-line no-unused-vars
const [device, setDevice] = useState({});
const [preview, setPreview] = useState(true);
const asyncGetDevice = async (ID) => {
const data = await getDeviceById(ID);
console.log(data.data);
const { deviceName, des, deviceSn, gymId, id, thirdComparisonMode,volumeSize,qrCodeSwitch } = data.data;
setDevice({ deviceName, des, deviceSn, gymId, id, thirdComparisonMode,volumeSize,qrCodeSwitch });
};
const handleSubmit = async (values, errors) => {
console.log('value & errors', values, errors);
if (errors) return Message.error('请检查输入数据是否有误');
const obj = { ...values, id: device.id };
const result = await updateDevice(obj);
console.log(result);
if (result.code === 0) {
Message.success('提交成功');
openPreView(true);
} else {
Message.error('提交失败');
}
};
const openPreView = (prop) => {
setPreview(prop);
};
useEffect(() => {
asyncGetDevice(id);
}, [id]);
return (
<div>
<Card free>
<Header title="基础信息" />
<Button
onClick={() => {
openPreView(false);
}}
>
编辑
</Button>
<Divider />
<Content>
<Form size={'large'} isPreview={preview} style={{ width: '60%' }} {...formItemLayout} colon>
<FormItem name="deviceName" label="设备名称" required requiredMessage="请输入设备名称!">
<Input defaultValue={device.deviceName} />
</FormItem>
<FormItem name="deviceSn" label="设备序号" required requiredMessage="请输入设备名称">
<Input placeholder="请输入设备名称" defaultValue={device.deviceSn} disabled />
</FormItem>
<FormItem name="thirdComparisonMode" label="核验模式" format="number">
<Select style={{ width: 200 }} defaultValue={device.thirdComparisonMode}>
{Modes.map((e) => (
<Option key={e.value} value={e.value}>
{e.label}
</Option>
))}
</Select>
</FormItem>
<FormItem name="volumeSize" label="音量控制">
{/* <Input defaultValue={device.volumeSize} /> */}
<Range defaultValue={device.volumeSize && Number(device.volumeSize)} marks={[0, 100]} />
</FormItem>
<FormItem name="qrCodeSwitch" label="开启二维码">
<Switch defaultChecked={device.qrCodeSwitch} />
</FormItem>
<FormItem name="des" label="设备备注" requiredMessage="请填写设备备注">
<Input placeholder="" defaultValue={device.des} />
</FormItem>
{preview ? null : (
<FormItem label=" " colon={false}>
<Form.Submit type="primary" validate onClick={handleSubmit} style={{ marginRight: 8 }}>
提交
</Form.Submit>
</FormItem>
)}
</Form>
</Content>
</Card>
</div>
);
}
export default Detail;
4、如何提交数据呢？
这时候我们需要Submit组件，只要监听这个组件的onClick事件即可，代码如上。如果是编辑修改功能，我们需要设置默认值，那么就需要在FormItem包裹的元素组件上设置defaultValue属性了。
5、其他表单元素
有的时候表单元素比较复杂，这时候我们就需要查看文档来挑选form元素了，上面的案例只演示了input、switch、rang、select四种元素，并且演示如何设置默认值，希望对你有用，其他元素大同小异。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录