标签: react-final-form-arrays

props.mutators 已弃用

我的代码正在运行,但收到​​警告:

警告:从 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)

reactjs final-form react-final-form react-final-form-arrays

4
推荐指数
1
解决办法
1481
查看次数

为 Final-form-arrays 中的数组提供初始值会导致状态更改重置整个表单,我该如何防止这种情况?

我有一个使用最终表单数组的表单。表单有效且验证有效,但是,当我在组件内进行状态更改时,它会重置我的所有值。

我能够使用react-final-form-arrays提供的相同示例复制该问题:

https://codesandbox.io/embed/react-final-form-field-arrays-om6p6

我添加了一个按钮来切换状态更改。本质上,只需尝试在表单中填充值,然后更改状态即可。表格将重置,我不明白为什么会出现这种情况。如果我删除初始值,这种情况就不会发生。

有谁知道为什么会这样?

forms reactjs react-final-form react-final-form-arrays

4
推荐指数
1
解决办法
4367
查看次数

如何将“最终形式计算”与“最终形式数组”结合在一起

我有一个表格,用于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)

reactjs final-form react-final-form-arrays

2
推荐指数
1
解决办法
644
查看次数