在表单呈现后预先填充"redux表单"的输入字段,可以通过以下步骤实现:
// actions.js
export const setFormData = (formData) => {
return {
type: 'SET_FORM_DATA',
payload: formData
}
}
// reducer.js
const initialState = {
formData: {}
}
const formReducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_FORM_DATA':
return {
...state,
formData: action.payload
}
default:
return state
}
}
export default formReducer
// FormComponent.js
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { setFormData } from './actions'
const FormComponent = ({ formData, setFormData }) => {
useEffect(() => {
// 在组件挂载后,调用setFormData action来设置表单数据
const initialFormData = {
// 在这里设置表单字段的初始值
name: 'John Doe',
email: 'johndoe@example.com',
// ...
}
setFormData(initialFormData)
}, [])
return (
<form>
{/* 在表单中使用redux表单的字段 */}
<input type="text" name="name" value={formData.name} />
<input type="email" name="email" value={formData.email} />
{/* ... */}
</form>
)
}
const mapStateToProps = (state) => {
return {
formData: state.form.formData
}
}
const mapDispatchToProps = {
setFormData
}
export default connect(mapStateToProps, mapDispatchToProps)(FormComponent)
通过以上步骤,你可以在表单呈现后预先填充"redux表单"的输入字段。在组件挂载后,通过调用setFormData action来设置表单数据,并将表单数据作为props传递给表单组件,从而实现预填充表单字段的功能。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云