Question

我想强制使用大写形式输入表单。

我使用了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>

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

Answer 1

在您的代码中，您没有使用 value字段或其他一些属性作为Input的值。请参见prop type定义中所用库的Input组件。

<Input
  type="text"
  maxLength={2}
  name="codePays"
  id="codePays"
  onChange={handleChange}
  value={codePaysValue}
/>

作为参考-使用钩子表示大写输入值的简单示例。

import React, { useState } from "react";
import ReactDOM from "react-dom";


function App() {
  const [value, setValue] = useState('')
  const changeHandler = ({ target }) => {
    setValue(target.value.toUpperCase())
  }
  return (
    <div className="App">
      <input type='text' value={value} onChange={changeHandler}></input>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望有帮助！

Answer 2

在这里，我使用的是我公司（基于Ant Design）创建的自制库，位于FORM.item包装器中。所以我才发现问题：我必须使用规范化道具。例子：

<Form>
    <Input
        type="text"
        maxLength={2}
        name="codePays"
        id="codePays"
        normalize={value => (value || '').toUpperCase()}
    />
</Form>

Answer 3

谢谢，我也有同样的问题。最后我找到了一个更短的解决方案，那就是简单地调用 toUpperCase() 方法。

const [value, setValue] = useState("");
...

return (
  ...
  <Input type='text' value={value.toUpperCase()} />
);

表单输入将在您键入时自动显示为大写。

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

3 个答案: