React-Admin 中的受控文本输入

Question

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

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

Answer 1

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(): 记录 -> 输入

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