antd表单的联动
需求:
点击加减能够动态的添加表单,这个antd文档中有我就不说了
选择第一个下拉选择器, 根据第一个的内容控制后面显示输入框还是下拉选择,
代码如下:
重点就是最外层的: <Form.Item shouldUpdate>{() => ()}</Form.Item>
<Form.Item shouldUpdate noStyle>
{() => (
<Form.List name="rules">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }, index) => (
<div key={key} className={styles.condition}>
<Space>
<Form.Item {...restField} name={[name, 'condition']} fieldKey={[fieldKey, 'condition']} noStyle>
<Select
options={conditionOption}
style={{ width: 112 }}
// value={conditionValue[name]}
// onChange={(value) => setConditionValue[name] = value}
/>
</Form.Item>
<Form.Item {...restField} name={[name, 'matching']} fieldKey={[fieldKey, 'matching']} noStyle>
<Select options={matchOption} style={{ width: 104 }} />
</Form.Item>
<Form.Item {...restField} name={[name, 'conditionValue']} fieldKey={[fieldKey, 'conditionValue']} shouldUpdate noStyle>
{
form.getFieldValue(['rules', name, 'condition' ]) === 1 ? <Input placeholder="请输入标签" style={{ width: 264 }} />
: <Select mode="multiple" style={{width: 264}} />
}
</Form.Item>
{fields.length > 1 ? <Reduce button onClick={() => remove(name)} /> : null}
{index === fields.length - 1 ? <Add button onClick={() => add()} /> : null}
</Space>
</div>
))}
</>
)}
</Form.List>
)}
</Form.Item>