react多组表单同事提交怎么分组

Posted 2023-02-25

提交

1. 使用 React 自带的 state 对表单进行分组，将 <form> 下的子组件（比如 <input> 和 <select>）划分为多个部分，相关子表单都存储于同一个 state 下。

2. 在同一个<form>中创建多个<div>容器，每个容器存放一组相关的表单组件，然后在提交按钮上指定每组数据对应的state字段。

3. 使用纯CSS的网格系统，将相关的表单组件布局在同一列或同一行，将相关的表单存储于同一个state中，让 form 进行提交。 参考技术A 首先要创建不同的表单(子组件),然后再最顶层(父组件)完成表单提交。1. text 将value 属性绑定为组件的某个数据,如 例子中的this.state.name, 当 name 值改变时,这个控件的 value 也会随之更新。绑定了一
2. radio 在react 中,我们不通过 name 属性来为单选框分组,我们通过进行一个等值判断来实现单选框的效果,如例子中checked=this.state.sex ===
3. select select 需要配合 option 显示选项,我们将 参考技术B 1. 创建表单组件

第一个表单组件

const CaseBaseInfoForm = Form.create()(props =>
const
form,
= props;

return (
<Form ref=caseBaseInfo>
...
</Form>
);
);
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
第二个表单组件

const ApplicantForm= Form.create()(props =>
const
form,
= props;

return (
<Form ref=applicant>
...
</Form>
);
);
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
2. 在 render() 中使用表单组件

使用第一个表单组件