antd-react-form-动态增删表单项
以antd4.x版本为例。代码如下:const [checkList] = useState([{ label: '客户端', value: 1 }, { label: '服务端', value: 2 }, { label: 'MTOP', value: 3 }]);// checked列表const [showFlag, setShowFlag] = useState(false); // 控制
·
以antd4.x版本为例。代码如下:
const [checkList] = useState([{ label: '客户端', value: 1 }, { label: '服务端', value: 2 }, { label: 'MTOP', value: 3 }]);// checked列表
const [showFlag, setShowFlag] = useState(false); // 控制是否可以增添表单
<Form
{...formItemLayout}
form={form}
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="场景名称"
name="sceneName"
rules={[
{
required: true,
message: '请输入场景名称',
},
{ pattern: new RegExp(/^\S+/, 'g'), message: '场景名称不能包含空格' },
]}
>
<Input style={{ width: 260 }} />
</Form.Item>
<Form.Item
label="fromSource"
name="fromSource"
>
<Input style={{ width: 260 }} />
</Form.Item>
<Form.Item
label="调用方法"
name="invokeTypes"
rules={[
{
required: true,
message: '请选择调用方法',
},
]}
>
<Checkbox.Group>
{checkList.map(item => (
<Checkbox value={item.value} key={item.value} onChange={checkBoxChange}>{item.label}</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
<Form.List name="interfaceUrls" initialValue={['']}>
{(fields, { add, remove }) => (
<>
{
fields.map((field, index) => (
<Form.Item
label="接口地址"
key={field.key}
>
<Form.Item
{...field}
noStyle
>
<Input style={{ width: 260, marginRight: '13px' }} />
</Form.Item>
{showFlag && index === 0 ? (<a onClick={() => add()}>添加</a>) : null}
{index !== 0
? (<a onClick={() => remove(field.name)}>删除</a>)
: null}
</Form.Item>
))
}
</>
)}
</Form.List>
<Form.Item
label="用户路径"
name="userPath"
rules={[
{
required: true,
message: '请输入用户路径',
},
]}
>
<Input style={{ width: 260 }} />
</Form.Item>
</Form>
效果如下:
更多推荐
已为社区贡献1条内容
所有评论(0)