react-final-form如何獲取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中有一些組件MyComponentInner ，因此層次結構是App => MyComponentOuter => 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-final-form的組件如何自動訪問“firstName”屬性？ （沒有任何道具被明確地傳遞給它）。

b）我想在MyComponentInner中訪問相同的firstName值; 什么是語法，例如，如果我想要console.log firstName。

Answer 1

a）它使用React上下文 。 <Form>組件包含一個final-form對象，它為您管理所有表單狀態， <Field>組件使用context與表單狀態進行通信。

b）像這樣的東西會這樣做。 為Field提供的渲染函數提供了所有這些FieldRenderProps 。

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