#yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断

简介: #yyds干货盘点 【React工作记录十一】控制ant design中form的必填项判断

导语

歌谣 歌谣 我这边需要做一个关于form表单验证的一个要求 当他在A状态的时候 我们需要设置验证 当在B状态的时候 我们不需要设置验证


代码实现

{/* 控制验证的规则 */}
          <Form.Item label="状态">
            {getFieldDecorator(
              'signInResson',
              form.getFieldsValue().signInResult === A ||
                form.getFieldsValue().signInResult === B
                ? {
                    initialValue: '',
                    rules: [{ required: true, message: '请填写状态' }],
                  }
                : { rules: [{ message: '请填写状态' }] }
            )(
              <Select style={{ width: '100%' }}>
                {ResultYyList.map((item) => (
                  <Select.Option key={item.key} value={item.key}>
                    {item.value}
                  </Select.Option>
                ))}
              </Select>
            )}
          </Form.Item>

总结

本文需要有一定React和ant design基础的朋友才能看懂 通过外部的状态判断是否为必填项


从而需求实现了 同事直呼歌谣太棒了

相关文章
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
643 0
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
125 0
|
1月前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
|
6月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
273 68
|
6月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
251 67
|
6月前
|
前端开发 JavaScript 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
283 62
|
8月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
245 58