标签: react-final-form
如何设置/更改外部用户操作的字段值React Final Form
推荐指数
解决办法
查看次数
使用 lodash debounce 返回一个 promise
使用 React、react-final-form 和 lodash debounce 函数，我想验证用户名是否尚未使用（该字段使用的是 react-final-form）。
我在获取 debounce 函数以从提取请求返回已解决的承诺时遇到问题。
我提供了以下代码和框链接来演示我的问题：
请谁能告诉我为什么我的代码不起作用。
验证的入口点来自在验证属性中引用的 this.isNameUnique 调用
import React from "react";
import { Field, Form } from "react-final-form";
import { debounce } from "lodash";
class DemoForm extends React.Component {
getIsNameUnique = name => {
console.log("getIsNameUnique", name);
// fake fetch request
return async name => {
const asyncResponse = await new Promise(resolve =>
setTimeout(resolve({ name: true }), 1000)
);
console.log("async api response", asyncResponse);
return asyncResponse;
};
};
debounceCreativeName = name => …推荐指数
解决办法
查看次数
在 react-admin 中使用服务器端验证响应
在我使用 react-admin 的应用程序中，我有一些表单必须在服务器端执行验证。我的 API（使用 api-platform 实现）返回一个 400 响应，其主体中有一个键，该键包含一个约束违规数组，键为字段名称，因此该信息用于提供逐个字段的错误消息。
这个问题与在这个老问题中探讨的相同。然而，由于 react-admin 从 redux-form 移动到 react-final-form，基于错误传奇的解决方案不再起作用。
官方 react-final-form 文档中给出的示例并不容易应用，因为 react-adminonSubmit自己管理属性。
推荐指数
解决办法
查看次数
React-Final-Form：从 props 设置初始值，在 props 更改时重置表单状态
我有一个组件，它需要一个balance道具，这个平衡道具会随着时间的推移而改变。
然后我有一个 React Final Form 来发送交易，通常的字段是发送金额，接收者......在我的 . 中validate，我只是检查用户是否有足够的余额来发送交易。
但是，如果我的余额在用户输入内容时发生变化，则整个表单将重置。你将如何只重置表单状态的一部分？
请参阅此代码和框示例：https : //codesandbox.io/s/jn69xql7y3 ：
- 输入东西
- 等待 5 秒
- 再次看到表单状态为空白
推荐指数
解决办法
查看次数
[React Final Form] 是否适用于 Material-UI 3.x？
我想将Material-UI 中的 TextField与react-final-form ( https://github.com/final-form/react-final-form ) 一起使用。
主要问题是“如何获取values对象？”
我无法从 TextField 获取它。
结果是：
我已经尝试过不同的例子，但没有任何效果。
我的代码：
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import './loginForm.css';
import { Form, Field } from 'react-final-form';
const handleSubmit = (event, values) => {
console.log('onsubmit event target ', event.target);
event.preventDefault();
console.log('onSubmit values: ', values);
};
const onChange = (event) => {
console.log('on changed: ', event.target.value);
};
const LoginForm = () => (
<Card …推荐指数
解决办法
查看次数
根据 react-final-form 的变化更新表单值的简单方法
我正在尝试使用react-final-form和material-ui实现一个具有两个连续依赖 Select的表单
要求
- 这两个字段都是必需的
- 当用户选择国家/地区值时
- 城市字段应重置为空白
- 城市字段不应标记为无效
- 用户应该能够随时完全重置表单
我很难用 react-final-form API找到一个简单而优雅的解决方案来满足这个要求。
可能有使用mutators、react-final-form-listeners或装饰器的方法，但这在我看来像是表单的常见用例，没有高级 API 的简单解决方案会很好。
这是一个结合了FormSpy组件、useRef钩子和form.resetapi 的版本。
https://codesandbox.io/embed/react-final-form-material-ui-field-dependencies-hn7ps
- subscribre以形成经由FormSpy值
onChange丙 - 每次值更改时更新反应参考
- 将 ref 值与新值进行比较并使用
form.resetAPI 重置城市字段值而不触发验证
这是使用声明表单规则方法的另一个版本，react-final-form-listeners就像 Erik 建议的那样。
https://codesandbox.io/embed/react-final-form-material-ui-field-dependencies-ijxd0
它要简单得多，因为我们不需要反应引用和 FormSpy。
这两种解决方案的作品几乎完全不同的是form.reset方法，重新定义形成initialValues引擎盖下，使RESET按钮不复位形式到原来的initialValues了。
是否有内置的方法来挂钩表单状态更改并比较旧/新值？
推荐指数
解决办法
查看次数
使用 yup 和自定义验证验证 react-final-form 表单
我有一个用 react-final-form 创建的表单和一个如下所示的验证函数
export const validate = async (values, schema) => {
if (typeof schema === 'function')
schema = schema();
try {
await schema.validate(values, { abortEarly: false });
} catch (e) {
return e.inner.reduce((errors, error) => {
return setIn(errors, error.path, error.message);
}, {});
}
};
所以当我呈现我的表单时，它看起来像这样
<Form
onSubmit={handleSubmit}
validate={values => validate(values,schema())}
/>
Schema 是一个 Yup 模式，定义如下
const schema = () =>
yup.object().shape({
name: yup
.string()
.max(255)
.required(REQUIRED_FIELD),
number: yup
.string()
.required(REQUIRED_FIELD),
exp_year: yup
.number()
.required(REQUIRED_FIELD),
exp_month: yup
.number()
.min(1,'Invalid')
.max(12,'Invalid') …推荐指数
解决办法
查看次数
反应最终形式。如何从组件状态设置字段值
我正在尝试向我的论坛添加日期选择器。问题是日期选择器只能通过组件状态工作。意味着选择的值进入状态。
我正在尝试强制最终表单字段使用该状态值。但我似乎无法弄清楚。
基本上试图做到这一点：
<Field name="field1" value={this.state.date}/>
推荐指数
解决办法
查看次数
如果没有字段/列名称，如何使用react-admin的ChipField？
我有一个CheckboxGroupInput这样的字段：
<CheckboxGroupInput source="fruits" choices={[
{ 'name': 'apples' },
{ 'name': 'pears' }
]} optionValue='name'/>
fruits当用户选择这两个选项时，它会为字段生成如下所示的 json ：
'fruits': ['apples','pears']
我想在Listusing中显示它ChipField，而source我没有，因为 json 是一个纯字符串数组。
如果 json 看起来像这样，源将是“名称”fruits:[{'name':'apples'}, {'name':'pears'}]
<ArrayField source='fruits'>
<SingleFieldList>
<ChipField source='???' />
</SingleFieldList>
</ArrayField>
如何使用ChipField OR显示纯字符串数组的内容，或者如何告诉CheckboxGroupInput生成对象数组而不是字符串数组？
推荐指数
解决办法
查看次数
React-final-form 在 Safari 17 中被破坏了吗？
我们正在测试一个在 Beta 版本上使用 React-final-form 的 WebView，它似乎会间歇性地冻结所有 UI 交互。这似乎与击键次数或其他 UI 事件有关。还有其他人证实过这一点吗？这是 Safari 中的错误，还是只是某种副作用？
推荐指数
解决办法
查看次数
标签 统计
react-final-form ×10
reactjs ×6
final-form ×4
material-ui ×3
forms ×2
react-admin ×2
validation ×2
ios17 ×1
javascript ×1
lodash ×1
safari ×1
safari-17 ×1
yup ×1