React-final-form 如何在表单的渲染中处理提交

Question

似乎我无法理解React-final-form 的工作原理。

有一个包含以下部分的功能组件： 在顶部：

import {Form, Field} from "react-final-form";

然后在返回：

return (
    <Fragment>
        <Form
            onSubmit={handleSubmit}
            render={ ({innerSubmit, form, submitting, pristine, values}) => (
                <form onSubmit={innerSubmit}>
                   ( Bunch of Fields... )

                     <div className="buttons">
                        <button type="submit" disabled={submitting}>
                            Save
                        </button>
                        <button
                            type="button"
                            onClick={form.reset}
                            disabled={submitting || pristine}>
                            Reset
                        </button>
                    </div>
                </form>
            )}
        />
   </Fragment>
)

所以，渲染是一个传递对象的函数。在那个对象中，第一个是“innerSubmit”。

innerSubmit 是如何连接到“handleSubmit”的？

以及对象中的这些值是什么（innerSubmit、form、submitting、pristine 和 values）。 React.dom 中的 render 函数（render 来自哪里）有不同的参数。

Answer 1

请仔细检查documentation。似乎handleSumbit 是一种作者的命名约定，应该用作渲染中的道具。另一方面，你的'innerSumbit'（我想它是一个表单处理函数？）应该传递给Form中的'onSumbit'。

可能对您来说一个好主意是检查 react-final-form 作者的yt tutorial。