为reduxForm()设置全局默认值可以通过创建一个高阶组件来实现。以下是一个示例代码:
import React from 'react';
import { reduxForm } from 'redux-form';
const withDefaultValues = (defaultValues) => (WrappedComponent) => {
class FormWithDefaultValues extends React.Component {
componentDidMount() {
const { initialize } = this.props;
initialize(defaultValues);
}
render() {
return <WrappedComponent {...this.props} />;
}
}
return reduxForm({
form: 'myForm',
})(FormWithDefaultValues);
};
export default withDefaultValues;
在上面的代码中,我们创建了一个名为withDefaultValues
的高阶组件。它接受一个defaultValues
参数,该参数包含了要设置的全局默认值。然后,我们返回一个新的组件FormWithDefaultValues
,该组件在挂载时会调用initialize
函数来设置默认值。
要使用这个高阶组件,可以将它应用于需要设置默认值的表单组件上,例如:
import React from 'react';
import { Field } from 'redux-form';
import withDefaultValues from './withDefaultValues';
const MyForm = () => {
return (
<form>
<Field name="username" component="input" type="text" />
<Field name="email" component="input" type="email" />
{/* 其他表单字段 */}
</form>
);
};
export default withDefaultValues({ username: 'John', email: 'john@example.com' })(MyForm);
在上面的代码中,我们将withDefaultValues
应用于MyForm
组件,并传递了一个包含默认值的对象。这样,在表单组件挂载时,FormWithDefaultValues
组件会自动设置默认值。
这种方法可以用于任何使用redux-form
的表单组件,它可以帮助我们在整个应用程序中设置全局默认值,而不需要在每个表单组件中手动设置默认值。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅供参考,具体的产品选择应根据实际需求和情况进行评估。
领取专属 10元无门槛券
手把手带您无忧上云