React-Admin 中的受控文本输入

编程问答 2022-05-23

问题描述

在我的问题被标记为重复之前，我想澄清一下我知道如何在普通/常规 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 /> 允许对其进行控制，即值是小写的。

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

解决方法

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. format()：记录 -> 输入

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

controlled-componentreact-adminreactjsreactjsreactjsreactjs