reactjs - 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。
解决方案
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>
推荐阅读
- ruby-on-rails - 雾谷歌谷歌存储身份验证失败
- c# - 如何在gridview绑定中将复选框更改为标签
- java - macOS Eclipse 找不到 OpenJDK
- postgresql - 如何在 postgres 查询中解析 json 数组
- java - 使用合成 backstack 启动 Activity 时出现奇怪的过渡
- typescript - 在 ViewingApplication 方法中使用 modelOptions
- laravel - 如何在 laravel 中对中间件进行 OR 操作
- azure - 我可以将我的网络服务链接到 azure 以接收通知吗
- react-native - 在调用 `createReduxContainer` 之前,请先调用 `createReactNavigationReduxMiddleware`,以便我们知道何时触发您的监听器
- java - Java JCA 中的 OpenPGP