首页 > 解决方案 > react-final-form Field 如何访问一些初始值?

问题描述

假设我的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。

标签: reactjsreact-final-form

解决方案


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>

推荐阅读