React-Admin 中的受控 TextInput

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)

两个函数的助记词：

parse(): 输入 -> 记录
format(): 记录 -> 输入

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

React-Admin 中的受控 TextInput

Controlled TextInput in React-Admin

reactjs

react-admin

controlled-component