文档中写道,
<Field/>每当其订阅的字段状态发生变化时,都会重新渲染。
因此,如果我有多个字段,则所有字段都将重新渲染,同时仅更改其中之一。有没有什么方法可以防止重新渲染目前未更改的其他字段?
请帮助理解react-final-form的api文档,
我们已经将 redux-form 迁移到了 react-final-form。在我的应用程序中,我们使用 formvalueselector api 来获取表单值。请帮助获得react-final-form中更苗条的api
https://redux-form.com/8.3.0/docs/api/formvalueselector.md/
需求是通过属性名称获取表单值
当用户从输入中删除内容时,我希望在状态中有空/空属性。
如果您在示例中看到,当用户清除输入时,状态为空。我使用状态来更新数据库上的数据,因此当代码用新数据更新旧数据时,值不会更新(没有属性!)。
示例:https : //codesandbox.io/s/3qvqnv6216
我找不到任何明智的方法将财产留在州内。
谢谢 :)
我想使用带有多个提交按钮的react-final-form构建一个表单,其中每个提交按钮在表单中设置不同的值。本质上,我想创建一个在呈现的HTML中看起来像这样的表单:
<form>
Are you over 18 years old?
<button type="submit">Yes</button>
<button type="submit">No</button>
</form>
Run Code Online (Sandbox Code Playgroud)
但是,我不知道如何使react-final-form将这些不同的提交按钮视为表单中的设置值。我尝试将组件状态,<input type="hidden">和onClick处理程序合并,如下所示:
class FormWithMultipleSubmits extends React.Component {
state = {
value: undefined
};
setValue = value => this.setState({ value: value });
render() {
return (
<Form>
Are you over 18 years old?
<Field
name="adult"
component="input"
type="hidden"
value={this.state.value}
/>
<button type="submit" onClick={() => this.setValue(true)}>
Yes
</button>
<button type="submit" onClick={() => this.setValue(false)}>
No
</button>
</Form>
);
}
}
Run Code Online (Sandbox Code Playgroud)
然而,这似乎并没有工作-这可能是因为在value该物业<Field> …
试图弄清楚如何一起使用这两个组件。github 上有一个问题,人们参考它来启动并运行它,但我无法弄清楚。其要点是这样的:
<Field name={`logo`}>
{(fieldprops) => (
<div>
<label>Logo</label>
<Dropzone
onDrop={(files, e) => {
props.change(`logo`, files);
props.blur(`logo`);
}}
/>
<pre>{JSON.stringify(fieldprops, 0, 2)}</pre>
</div>
)}
</Field>
Run Code Online (Sandbox Code Playgroud)
使用确切的代码对我来说会抛出错误:TypeError: children is not a function
我在代码沙盒上设置了一个使用挂钩和文件预览的简化测试用例。我还尝试查看文档中的自定义输入,但似乎缺少一些东西才能正常工作。如果有人能指出我正确的方向,我会非常高兴。
我有一个密码重置表单,其中对新密码的验证是这样的,它应该与正则表达式匹配并且不应该与用户的 userId 匹配。userId 检查必须不区分大小写。
我尝试了小写方法,但随后正则表达式验证失败,因为在验证开始之前该值已转换为小写。
newPassword: yup
.string()
.notOneOf(
[yup.ref("oldPassword")],
"New password must be different than current password."
)
.matches(REGEX_PASSWORD, "Password does not meet requirements.")
.lowercase()
.notOneOf(
[userId.toLowerCase()],
"New password must not be same as userId"
)
Run Code Online (Sandbox Code Playgroud)
是否有任何方法可用于转换仅用于 userId 检查的值,以便我可以执行不区分大小写的检查而不必担心正则表达式失败。
作为一名开发人员,我想在用户使用 React Final Form 成功提交表单时禁用“提交”按钮,并在用户在表单中输入一些新文本时启用“提交”按钮。
当前的
该变量仅在第一次加载表单时pristine将禁用属性设置为true,但是当用户提交表单(而不是重新加载页面)时,该变量pristine是false并且我希望它是为了true禁用“提交”按钮。
期望的行为
当前行为示例
https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/simple
我的调查
我尝试使用最终表格提供的以下变量的组合,但结果不成功pristine,,,,touchedsubmitSucceededlastSubmittedValues
使用multiselectwith时出现此错误final-form。
设置
value时下拉菜单必须是一个数组multiple。接收类型:[object String]
这是我的代码:
https://codesandbox.io/s/cool-torvalds-lhe9d
<Dropdown
{...props.input}
clearable
fluid
multiple
search
onChange={(e, data) => {
return data.value.length > 0
? input.onChange(data.value)
: input.onChange("");
}}
onSearchChange={onSearchChange}
selection
defaultValue={[]}
options={data}
placeholder="Select values"
/>
Run Code Online (Sandbox Code Playgroud)
任何更新?