如何使用 redux 表单宽度 "Field" 和 Bootstrap

Question

我的表单中有这个组件：

  <Field className={styles.formcontrol}
    component='input'
    name={name}
    type={type}
  />

这是来自 redux-form 的字段。

但是，我必须使用 bootstrap 这个表格。 Bootstrap 输入如下所示：

<FormGroup controlId='login'>
    <FormControl name='email' placeholder='Login' />
</FormGroup>

如何应用 Bootstrap 样式（FormGroup 组件）但仍使用来自 redux-form 的 "Field"？

Answer 1

我建议研究使用 returns 您的组件的无状态函数。

http://redux-form.com/6.6.3/docs/api/Field.md/#usage

例如

// outside your render() method
const renderField = (field) => (
    <FormGroup controlId='login'>
        <FormControl name='email' placeholder='Login' />
    </FormGroup>
)

// inside your render() method
<Field name="myField" component={renderField}/>

Answer 2

您可以使用包含 Bootstrap 组件的无状态函数。

// The props will be passed by redux-form.
const MyCustomComponent = ({input}: props) => (
    <FormGroup controlId='login'>
        <FormControl name='email' placeholder='Login' value={input.value} onChange={input.onChange} {...props}/>
    </FormGroup>
)

并将其与 Field 一起用作

<Field 
    className={styles.formcontrol}
    component={MyCustomComponent}
    name={name}
    type={type}
/>

这里是 nice article 解释 React 中的无状态组件。

如何使用 redux 表单宽度 "Field" 和 Bootstrap

How to use a redux form width "Field" with Bootstrap

javascript

reactjs

redux

redux-form