如何解决React-Admin 中的受控文本输入
在我的问题被标记为重复之前,我想澄清一下我知道如何在普通/常规 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)
两个函数的助记符:
-
parse():输入 -> 记录
-
format():记录 -> 输入
您现在可以根据需要修改实现。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。