4

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

4

1 回答 1

2

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>
于 2018-07-19T09:52:19.457 回答