强制表单输入大写 - onChange 和 React Hooks

2024-01-10

我想强制表单输入大写。

我用一个onChange方法和 React Hooks,但它不起作用,我不知道为什么......这是非常基本的,但我是 React 初学者。

我在更高的组件上导入了 Redux 存储:props name -> "facture"

import React, { useState } from 'react'
import { Col, Row } from 'mdmrc/lib/components/grid'
import { Button } from 'mdmrc/lib/components/button'
import { Form } from 'mdmrc/lib/components/form'
import { Input } from 'mdmrc/lib/components/input'
import { useTranslation } from 'react-i18next'

/**
 * composant de mise à jour des données de la facture
 */
export const UpdateForm = ({ classes, onSubmit, facture }) => {
  // ajout de la traduction
  const { t } = useTranslation()

  const [codePaysValue, setCodePaysValue] = useState(
    facture.codePays ? facture.codePays : ''
  )

  const handleChange = e => {
    const value = e.target.value.toUpperCase()
    setCodePaysValue(value)
  }

  /**
   * Controle de surface du formulaire d'update
   */
  const validationOptions = {
    some code here...
  }

  return (
    <Col span={12} className={classes.updateForm}>
      <Form
        id="update-form"
        onSubmit={onSubmit}
        validationOptions={validationOptions}
        defaultValues={{
          codePays: codePaysValue ? codePaysValue : '',
        }}
      >
        <Row>
          <Col span={8}>
            <label>{t('updateForm.codePays')}</label>
          </Col>
          <Col span={16}>
            <Input
              type="text"
              maxLength={2}
              name="codePays"
              id="codePays"
              onChange={handleChange}
            />
          </Col>
        </Row>
        <Button type="primary" style={{ width: '100%' }} htmlType="submit">
          {t('updateForm.enregistrer')}
        </Button>
      </Form>
    </Col>

没有控制台错误。但如果我不使用大写字母,我的代码始终是小写的。


在这里,我使用的是我公司创建的自制库(基于 Ant Design),并且位于 FORM.item 包装器中。所以我刚刚发现了问题:我必须使用标准化道具。示例:

<Form>
    <Input
        type="text"
        maxLength={2}
        name="codePays"
        id="codePays"
        normalize={value => (value || '').toUpperCase()}
    />
</Form>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

强制表单输入大写 - onChange 和 React Hooks 的相关文章

随机推荐