antd Form 初始化的时候根据初始化值判断一个输入框是隐藏还是展示,
时间: 2024-02-21 10:59:20 浏览: 112
在 antd Form 组件中,可以通过 `initialValues` 属性来设置表单的初始值。同时,可以通过在表单项的 `rules` 属性中设置自定义校验规则,来动态显示或隐藏某些表单项。
例如,我们有一个表单,其中有两个输入框,分别是用户名和密码。根据用户名的值是否为 `admin`,我们要动态显示或隐藏一个额外的输入框。代码如下:
```jsx
<Form
initialValues={{ username: '', password: '', extra: '' }}
>
<Form.Item
label="用户名"
name="username"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input.Password />
</Form.Item>
<Form.Item
label="附加信息"
name="extra"
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (getFieldValue('username') === 'admin') {
if (value) {
return Promise.resolve();
}
return Promise.reject(new Error('请输入附加信息'));
}
return Promise.resolve();
},
}),
]}
style={{ display: 'none' }}
>
<Input />
</Form.Item>
</Form>
```
在上述代码中,我们在表单的 `initialValues` 属性中设置了表单的初始值,在附加信息输入框的 `rules` 属性中设置了一个自定义校验规则,该规则会根据用户名的值是否为 `admin` 来动态显示或隐藏该输入框。具体来说,当用户名的值为 `admin` 时,该输入框会被显示,否则会被隐藏。
在输入框的 `style` 属性中,我们将该输入框的显示样式设置为 `display: none`,表示初始时该输入框是隐藏的。当用户名的值为 `admin` 时,由于校验规则的变化,该输入框会被显示。
需要注意的是,当该输入框被显示时,用户输入的值也会被提交到后台,因此在后台处理时需要注意该输入框的值是否合法。
阅读全文