1

在我的问题被标记为重复之前，我想澄清一下我知道如何在 vanilla/regular React 中编写受控输入。

我现在遇到的问题是，我希望能够使用 React-Admin 的TextInput. 使用打字稿提示，我看到value并被onChange接受为属性，但它们不控制输入。

例如

const LowerCaseInput: React.FC = (props) => {
  const [value, setValue] = useState('');

  const handleChange = (event: any) => {
    const val = event.target.value || '';
    setValue(val.toLowerCase()) // Disallow Uppercase characters
  }

  return <TextInput {...props} value={value} onChange={handleChange} />
}

在此示例中，我可以在 TextInput 中键入字符，但它们不会被强制为小写。我可以 console.log() 每次输入时都会显示这些值。此外，切换到香草<input />允许对其进行控制，即值是小写的。

我应该能够以这种方式控制输入，还是有其他一些（迂回的方法）可以做一些相当标准的事情？

4

1 回答 1

3

React-Admin 使用React-Final-Form在内部控制表单输入。因此，您可以根据需要使用format()和parse()方法。

给你一个 React-final-form 的例子。

<Field
    name="username"
    component="input"
    type="text"
    placeholder="Username"
    format={(value) => value && value.toUpperCase()}
    parse={(value) => (value ? value.toLowerCase() : "")}
/>

您也可以在 react-admin 上下文中使用它。

文档中也提到了相同的内容。（https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record）

两个函数的助记符：

  1. parse(): 输入 -> 记录

  2. 格式（）：记录->输入

您现在可以根据需要修改实现。

于 2021-03-01T12:16:42.787 回答