我的代码正在运行,但收到警告:
警告:从 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}> …Run Code Online (Sandbox Code Playgroud) 我有一个使用最终表单数组的表单。表单有效且验证有效,但是,当我在组件内进行状态更改时,它会重置我的所有值。
我能够使用react-final-form-arrays提供的相同示例复制该问题:
https://codesandbox.io/embed/react-final-form-field-arrays-om6p6
我添加了一个按钮来切换状态更改。本质上,只需尝试在表单中填充值,然后更改状态即可。表格将重置,我不明白为什么会出现这种情况。如果我删除初始值,这种情况就不会发生。
有谁知道为什么会这样?
我有一个表格,用于react-final-form-array拥有许多“与会者”。我希望每个Attendee.Email输入都进行Web查找,然后根据结果设置Attendee.FirstName和Attendee.Surname。
我不确定应该如何用final-form-calculate装饰器表达这一点。具体来说,我不知道如何引用数组中的单个表单项。
这是我的开始:
const MyForm = props => {
const calculator = createDecorator(
{
field: 'Attendees.Email', // <-- this needs to happen for each Email
updates: {
// ... do some lookups and set FirstName and Surname based off database query
Attendees.FirstName: (email, allValues) =>
someLookup(email).FirstName
}
},
);
const submit = values => {
console.log(values);
};
return (<Form onSubmit={submit}
mutators={{
...arrayMutators,
}}
decorators={[calculator]}
render={({handleSubmit, pristine, invalid, mutators: {push, pop}}) => {
return (
<form onSubmit={handleSubmit}> …Run Code Online (Sandbox Code Playgroud)