#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基础的朋友才能看懂 通过外部的状态判断是否为必填项


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


相关文章
|
5月前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
64 0
|
9月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
246 0
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
80 0
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
124 0
|
前端开发
前端笔记:React的form表单全部置空或者某个操作框置空的做法
在React框架前端开发中,经常会有弹出框的开发,涉及到弹出框,难免就会有表单。一般在关闭弹出框或者对表单联动时,往往都需要考虑对表单进行置空操作了。
135 0
|
前端开发
react中form表单编辑的时候回显无法回显
react中form表单编辑的时候回显无法回显
108 0
|
前端开发 数据格式
再次接触老朋友react+ant design table合并单元格
再次接触老朋友react+ant design table合并单元格
187 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件9
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件9
73 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件8
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件8
78 0