自定义组件适应redux-forms的方法是通过使用Field组件和connect函数来连接自定义组件和redux-forms。
首先,需要导入redux-forms的相关库和组件:
import { Field, connect } from 'redux-form';
然后,创建一个自定义组件,并将其连接到redux-forms:
class CustomComponent extends React.Component {
render() {
const { input, meta, ...rest } = this.props;
return (
<div>
<input {...input} {...rest} />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
);
}
}
CustomComponent = connect()(CustomComponent);
在上面的代码中,我们使用connect函数将自定义组件连接到redux-forms。通过这样做,我们可以在自定义组件中访问redux-forms的相关属性和方法。
接下来,在使用自定义组件的地方,使用Field组件来包裹自定义组件,并指定Field组件的name属性和component属性:
<Field name="fieldName" component={CustomComponent} />
在上面的代码中,我们将自定义组件作为Field组件的component属性的值,并指定了一个唯一的name属性。
最后,在redux-forms的表单中使用这个Field组件:
import { reduxForm } from 'redux-form';
class MyForm extends React.Component {
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit}>
<Field name="fieldName" component={CustomComponent} />
<button type="submit">Submit</button>
</form>
);
}
}
MyForm = reduxForm({
form: 'myForm'
})(MyForm);
在上面的代码中,我们使用reduxForm函数将表单组件连接到redux-forms,并指定了一个唯一的form属性。
通过以上步骤,我们就可以让自定义组件适应redux-forms,并在表单中使用它。
领取专属 10元无门槛券
手把手带您无忧上云