我有一个组件，它需要一个balance道具，这个平衡道具会随着时间的推移而改变。
然后我有一个 React Final Form 来发送交易，通常的字段是发送金额，接收者......在我的 . 中validate，我只是检查用户是否有足够的余额来发送交易。
但是，如果我的余额在用户输入内容时发生变化，则整个表单将重置。你将如何只重置表单状态的一部分？
请参阅此代码和框示例：https : //codesandbox.io/s/jn69xql7y3 ：
使用final-form,我有第三方输入组件.我为它写了一个适配器.它也有验证器,但meta.touched总是错误的.我已经尝试将onFocus事件传播到输入,但没有运气.我究竟做错了什么？
const requiredValidator = value => (value ? undefined : 'is required');
const FloatingLabelInputAdapter = ({ input, meta, ...rest }) => (
<FloatingLabelInput
{...rest}
onChange={(event) => input.onChange(event)}
onFocus={(event) => input.onFocus(event)}
errorText={meta.touched ? meta.error : ''}
/>
)
// used like this:
<Field
component={FloatingLabelInputAdapter}
label="Email"
name="email"
type="text"
validate={requiredValidator}
/>
// and here's the render() of the component
render() {
const { children, label } = this.props;
const { focussing, used } = this.state;
console.log('FloatingLabelInput.props', this.props);
return (
<Group {...this.props} …我创建了一个应用程序，其中使用了来自react-final-form的FieldArray组件。我的 Array 组件存在性能问题。每个组件还包含大约8个字段（每个字段都包含验证规则）（也来自react-final-form），当我添加50多个元素时，应用程序的滞后（同时将所有组件渲染到虚拟DOM中并将其与当前DOM进行比较）。有人遇到过这样的麻烦吗？
我怎样才能避免这种情况？
我正在尝试向我的论坛添加日期选择器。问题是日期选择器只能通过组件状态工作。意味着选择的值进入状态。
我正在尝试强制最终表单字段使用该状态值。但我似乎无法弄清楚。
基本上试图做到这一点：
<Field name="field1" value={this.state.date}/>
我无法将我的下一个领域集中在最终形式和本机和功能组件上。关于这种情况，大约有 0 个文档。
<Field
component={TextField}
name="title"
returnKeyType={"next"}
blurOnSubmit={false}
onSubmitEditing={() => {
_descriptionFieldRef.current.focus();
}}
/>
我们正在测试一个在 Beta 版本上使用 React-final-form 的 WebView，它似乎会间歇性地冻结所有 UI 交互。这似乎与击键次数或其他 UI 事件有关。还有其他人证实过这一点吗？这是 Safari 中的错误，还是只是某种副作用？
我的代码正在运行，但收到警告：
警告：从 React Final Form v3.3.0 开始，props.mutators 已被弃用，并将在 React Final Form 的下一个主要版本中删除。使用： props.form.mutators 代替。检查您的 ReactFinalForm 渲染道具。
以这个例子：
https://codesandbox.io/s/kx8qv67nk5
return <Form
onSubmit={() => console.log('ok')}
mutators={{
...arrayMutators
}}
initialValues={ {customers: [{firstName: 'a', lastName: 'b'}]} }
render={({
handleSubmit,
mutators: { push, pop }, // injected from final-form-arrays above
pristine,
reset,
submitting,
values
}) => {
return (
<form onSubmit={handleSubmit}>
<div className="buttons">
<button
type="button"
onClick={() => push('customers', undefined)}>
Add Customer
</button>
</div>
<FieldArray name="customers">
{({ fields }) =>
fields.map((name, index) => (
<div key={name}> …一旦表单的字段被验证，提交不会触发重新运行验证。有没有办法在提交表单时触发重新运行验证？
我有一个表单字段，如果未在特定时间范围内提交，其值可能会无效。这不是异步的；我只是想介绍一个场景，在这种情况下，用户有一段时间没有点击提交，当他们最终点击提交时，该值将变得无效。最终表单会记住值更改后立即发生的验证结果，这意味着无论验证和提交之间经过多长时间，未更改的值仍然有效。这是我想要挂钩和改变的行为；在我的用例中，中间时间很重要。我曾尝试使用包中的beforeSubmit侦听器，final-form-submit-listener但它只提供对FormApi对象的访问权限。我尝试使用pauseValidation和resumeValidation函数FormApi但他们无法实现我想要的，或者我没有正确使用它们。我有一种感觉，如何做到这一点非常明显，但我无法弄清楚。
我创建了这个沙箱来演示我的意思。
谢谢！
更新：一些附加信息：
meta表单字段的对象。我的代码库很复杂并且严重依赖meta对象来显示错误消息。尝试在提交处理程序中复制该功能可能会起作用，但它很笨拙，并且违反了整个代码库中使用的约定。有没有办法同时重置表单并设置状态？我尝试了下面的代码，但它似乎不起作用。任何意见都将受到赞赏。
<Form
onSubmit={this.onSubmit}
render={({handleSubmit, form, submitting, pristine, values}) => (
<form onSubmit={handleSubmit}>
.
.
.
.
<button
type="button"
onClick={() => {
form.reset;
this.setState({"reset": true});
}}
disabled={submitting || pristine}
>
Reset
</button>
</form>
final-form ×10
reactjs ×8
ios17 ×1
javascript ×1
performance ×1
react-native ×1
safari ×1
safari-17 ×1