关于react的form

介绍

react作为主流框架之一,其中from作为其中最重要的模块,关于其个更为便利的用法,熟练应用会大大减少工作时间

对象

antd的form

创建的表单

步骤1

引入antd form
import {Form, Button} from "antd";

步骤2

<Form 
	onfinish={(values)=>{}}//提交回调
>
	<Form.Item name="name1"><Input /></Form.Item>
	<Form.Item name="name2"><Button htmlType="submit">提交</Button></Form.Item>
</Form>

注意点

1给button指定htmlType="submit"会自动绑定按钮提交回调
2给每一个需要提交数据的formitem指定一个name以绑定对应的value值
3button需要写在formitem中

编辑页接收数据并且渲染表单

步骤1

//绑定form
const [form] = Form.useForm();
<Form 	
	form = {form}
	onfinish={(values)=>{}}//提交回调
>
	<Form.Item name="name1"><Input /></Form.Item>
	<Form.Item name="name2"><Button htmlType="submit">提交</Button></Form.Item>
</Form>

步骤2

//利用setFieldsValue方法渲染表单
form.setFieldsValue(formData);

表单复杂用法

情形1
一行有多个输入框并且公用一个label的情况比如

//代码
<Form.Item
	label="节点执行者"
>
	<Form.Item
		name="category"
		style={{
			display: "inline-block",
			width: "calc(30% - 0px)"
		}}
	>
		<Select>
			<Option value={0}>人</Option>
		</Select>
	</Form.Item>
	<Form.Item
		name="executor_id"
	>
		<Select>
				<Select.Option key={index} value={item.id}>
					{item.name}
				</Select.Option>
		</Select>
	</Form.Item>
</Form.Item>
//一个formitem中可以放入多个formitem

表单布局

每一个formitem可以用一个Row包裹布局 这样可以实现自适应且 通过 gutter span等可以减少css的冗余写法

容易存在的问题

1.defaultvalue 的warning警告问题
解决办法:采用initialValues={}的写法
2.情形:当点击按钮时增加一行item 用usestate存放一个映射formitem数量的数组,当点击后set一下数组的内容,不会立刻渲染页面
解决办法:采取usereducer的方法实时对数组进行渲染

补充知识点

1.清空表单内容 form.resetFields()