antDesign中Input等输入类组件将输入的英文内容转为大写。

最新推荐文章于 2023-08-07 02:08:55 发布

IT吃糖

最新推荐文章于 2023-08-07 02:08:55 发布

阅读量1.2k

点赞数

分类专栏： antd使用之Form组件文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/Csdn_____c/article/details/122805510

版权

antd使用之Form组件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前些天自定义了一个组件完成了标题中的功能，但是今天发现用了自定义的组件后数据没有办法正常的回显，还没有找到解决办法，所以我换一个办法，用了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>

结果如下：