前些天自定义了一个组件完成了标题中的功能,但是今天发现用了自定义的组件后数据没有办法正常的回显,还没有找到解决办法,所以我换一个办法,用了Form组件的setFieldsValue方法进行操作,具体操作如下。
第二个代码块中的代码只需要看Form里面的Input组件和ProTextArea组件(这是ant design pro中的一个组件,跟原来的组件差不多,这不会影响你的操作结果)这集行代码和里面的lowerToUpper函数就可以了。
//lowerToUpper是我写的一个通用函数,目的就是减少定义多个函数
//(type:string,value:string)表示两个参数都是字符串,当然你写成(type,value)这样的的形式也不影响执行结果
//type:字段名,value:字段的值
const lowerToUpper = (type:string,value:string)=>{
//通过form1.setFieldsValue设置某个字段的内容,而不通过setState的方式去修改
form1.setFieldsValue({
[type]:value.toUpperCase()
//这里需要注意的是type是一个变量,如果你把参数写成这样{type:value.toUpperCase()}
//那么你会得不到符合预期的结果,因为{type:xxx}表示的是{'type':xxx},它不会按照你想的把type当成一个变量,所以你需要通过[type]的方式去读这个变量,这里是很容易出错的地方。
})
}
<Form
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
preserve={false}
form={form1}//form1是当前整个表单对象
autoComplete="off"
>
<Item
label="Code"
name="code"
rules={[{ required: true, message: 'Please input your Code', max: 30 }]}
>
<Input allowClear disabled={booleanStore} placeholder="Please input" onChange={(e)=>lowerToUpper('code',e.target.value)}/>
//lowerToUpper是小写转换为大写的一个方法,第一个参数是你正在操作的字段,第二个参数是操作的数据,后面几个输入框也是调用的同一个方法,只是第一个字段名不同。
</Item>
<Item
label="Name"
name="name"
rules={[{ required: true, message: 'Please input your Store Name', max: 100 }]}
>
<Input disabled={isNameAddress} placeholder="Please input" onChange={(e)=>lowerToUpper('name',e.target.value)}/>
</Item>
<Item label="Address" name="address">
<ProTextArea
fieldProps={{
maxLength: 500,
autoSize: { minRows: 4, maxRows: 4 },
showCount: true,
onKeyDown: (e) => {
if (e.key == 'Enter') {
e.preventDefault();
}
},
}}
placeholder="Please input"
disabled={isNameAddress}
rules={[
{ required: true, message: 'Please input your Detailed Address', max: 300 },
]}
onChange={(e)=>lowerToUpper('address',e.target.value)}
/>
</Item>
<Item name="isDefault" labelCol={{ span: 4 }} label="Default">
<Switch
checkedChildren="Yes"
unCheckedChildren="No"
defaultChecked={hasDefault}
onChange={(boolean) => {
if (boolean) {
setStoreStatusVariable(() => boolean);
defaultMapStatus(storeCurrentObj, isStoreStatusVariable);
}
}}
disabled={hasDefault}
/>
</Item>
<Item name="isActive" labelCol={{ span: 4 }} label="Status">
<ProSwitch
name="isActive"
checkedChildren="Active"
unCheckedChildren="Inactive"
disabled={hasDefault}
/>
</Item>
</Form>
结果如下: