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 context。 with()组件包含一个<Form>对象，该对象可以为您管理所有表单状态，而final-form组件则使用<Field>与表单状态进行对话。

b）这样的事情可以做到。所有这些FieldRenderProps都提供给context的呈现功能。

Field

react-final-form字段如何访问一些初始值？

1 个答案: