react-antd-动态form表单
1.以官网的form.List为基础进行改造:动态增加表单,默认且至少为一项,不上限
2.虚拟设置formList的初始值
- render渲染部分
<Form
name="dynamic_form_item"
onFinish={this.onFinish}
ref={this.listForm}
initialValues= {{
sendTo: [
'',
]
}}
>
<Form.List
name="sendTo"
rules={[
{
validator: async (_, names) => {
if (!names || names.length < 1) {
return Promise.reject(new Error('At least 1 passengers'));
}
},
},
]}
>
{(fields, { add, remove }, { errors }) => (
<>
{
fields.map((field, index) => {
return (
<div key={field.key}>
<Row>
<Col>
<Form.Item
label={'用户名'}
{...field}
validateTrigger={['onChange', 'onBlur']}
>
<Input placeholder="请输入用户名" />
</Form.Item>
</Col>
<Col style={{margin:'0 8px'}}>
<Button
type="dashed"
icon={<MinusCircleOutlined />}
shape='circle'
onClick={() => remove(field.name)}
disabled = { fields.length > 1 ? false : true }
>
</Button>
</Col>
<Col >
<Button
type="dashed"
onClick={() => add()}
icon={<PlusOutlined />}
shape='circle'
>
</Button>
</Col>
</Row>
</div>
)
})
}
<Form.ErrorList errors={errors}/>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
<Button onClick={this.init}>设置formlist初始值</Button>
</Form>
- 虚拟设置初始值
init = () => {
let arr = ['112','fdasf','2321321']
this.listForm.current.setFieldsValue({
sendTo: arr
})
}
onFinish = values => {
console.log(values);
}
[^1]转载请标明出处。