React踩坑之antd输入框rules中的required=true问题
更新时间：2023年06月07日 08:39:54 作者：star_zone
这篇文章主要介绍了React踩坑之antd输入框rules中的required=true问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
React antd输入框rules中的required=true
你可能跟我一样，输入框必输校验的设置：required=true，下面是一个查询列表中的过滤条件输入框
这样单独使用时，是没问题的。
但是，如下图，当你有个页面，或者同个页面里，还有一个新增或修改界面，一般同个界面的输入框跟引用界面的输入框，都是用创建的同一个form，在这个新增界面提交的时候，会发现你提交不了，提示你上面的name_ss也是必填的。
这种情况屏幕前的你肯定是有遇到过的。
但是，经过下面这样改后，聪明的你马上就会明白：
就是让新增/修改页的是否必输，取决于当前是否在新增修改界面，让列表过滤条件的姓名必输，在新增编辑状态时，为非必输。这样就能完美解决问题。
React+antd实现下拉框输入
const onChangeSelect = value => {// onSearch对应方法
if(value){// 在最后一次点击也就是失去焦点时是没有值得，所以需要判断
form.setFieldsValue({ // 设置表单值
phoneType:value
})
}
}
<Select onClick={type} placeholder="请选择" allowClear showSearch filterOption={false} onSearch={onChangeSelect}>
{
typeList.map((item, index) => {
return <Select.Option key={index} value={item} >
{item}
</Select.Option>
})
}
</Select>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
随着代码的增加，每次的状态改变，页面进行一次 reRender ，这将产生很多不必要的 reRender 不仅浪费性能，从而导致页面卡顿，这篇文章主要介绍了React.memo 和 useMemo 的使用问题小结,需要的朋友可以参考下2022-11-11
这篇文章主要为大家介绍了react组件中过渡动画的问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React事件处理的机制及原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
教你react中如何理解usestate、useEffect副作用、useRef标识和useContext
这篇文章主要介绍了react中如何理解usestate、useEffect副作用、useRef标识和useContext,其实与vue中的ref和reactive一样，通过useState获取到的数据可以实现组件视图实时交互，而普通定义的数据仅仅在业务中使用，需要的朋友可以参考下2022-11-11
React之错误边界 Error Boundaries示例详解
这篇文章主要为大家介绍了React之错误边界Error Boundaries示例教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了在create-react-app中使用sass的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
react的渲染机制是非常独特的,有别于 Vue 框架的渲染次数的优化计算,React 很久以来就有PureComponent、shouldUpdate,本文小编给大家介绍了React渲染的优化方案,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了react循环数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家介绍了React源码调试方式实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
react echarts tooltip 区域新加输入框编辑保存数据功能
这篇文章主要介绍了react echarts tooltip 区域新加输入框编辑保存数据功能,大概思路是用一个div包裹echarts, 然后在echarts的同级新建一个div用来用来模拟真实tooltip，通过鼠标移入移出事件控制真实tooltip的显示与隐藏，需要的朋友可以参考下2023-05-05
最新评论