antd Form 表单 Form.List 通过select动态控制显示内容

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>