首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

让“自定义”组件适应redux-forms?

自定义组件适应redux-forms的方法是通过使用Field组件和connect函数来连接自定义组件和redux-forms。

首先,需要导入redux-forms的相关库和组件:

代码语言:txt
复制
import { Field, connect } from 'redux-form';

然后,创建一个自定义组件,并将其连接到redux-forms:

代码语言:txt
复制
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属性:

代码语言:txt
复制
<Field name="fieldName" component={CustomComponent} />

在上面的代码中,我们将自定义组件作为Field组件的component属性的值,并指定了一个唯一的name属性。

最后,在redux-forms的表单中使用这个Field组件:

代码语言:txt
复制
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,并在表单中使用它。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券