需求是表单元素不能输入空格,小小的需求我产生了大大的疑惑。
想法是把表单元素的value交给state接管,在onchange事件中修改state的值。
但是设置好了发现事件失效,根本无法输入。如下:
<InputItem
value={address}
disabled={isEdit}
{...getFieldProps('address', {
initialValue: userInfo.address || customerInfo.address || '',
rules: [{ required: true, message: '请填写地址' }],
})}
clear
placeholder="请输入地址"
onChange={(e) => this.setState({ address: e.replace(/\s+/g, '') })}
/>
这个地方的表单校验不能去掉,并且不能改为在提交前toast.info来校验,要和别的表单元素保持一致。
经查证发现,在使用getFieldProps时,表单控件会接管value这个属性,所以即想又想当然不行啦
解决方案:表单的事件还是交给表单来做吧,使用 setFieldsValue
onChange={(e)=> setFieldsValue({address:e.replace(/\s+/g, '')}) }