我想强制表单输入大写。
我用一个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(使用前将#替换为@)