react最终形式Field如何访问一些初始值

Question

假设我的App组件看起来像：

import { Form } from "react-final-form";
myInitData = {
firstName: "akira",
lastName: "fubuki"
}
render() {
return 
<Form
initialValues={myInitData} 
onSubmit={this.handleSubmit}
validate={this.validate}
>
{({handleSubmit, submitting, values}) => (
<MyComponentOuter
someProp1={100}
someProp2={200}
/>
)}
</Form>
}

此外，我在MyComponentOuter中有一些组件MySomponentInneryComponentOuter=>MyComponentInner

MyComponentInner看起来像：

class MyComponentInner extends Component {
componentDidMount() {
console.log(????) //how do i get access to firstName here..?
}
render() {
return (
<label>first name</label>
<Field
name="firstName"
component="input"
type="text"
/>
)
}
}

我的问题是：

a( react最终表单的组件如何自动访问"firstName"属性？(没有任何道具被明确地传给它(。

b( 我想在MyComponentInner中访问相同的firstName值；例如，如果我想console.log firstName，语法是什么。

Answer 1

a(它使用React上下文。<Form>组件保存一个final-form对象，该对象为您管理所有表单状态，<Field>组件使用context与表单状态对话。

b( 给Field的render函数提供了所有这些FieldRenderProps。

<Field name="firstName">
{
({ input } /* FieldRenderProps */) => {
console.log(input.value)
return null // render nothing (this is a render function)
}
}
</Field>