Question

我的形式有这个组件：

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

这是来自redux-form的字段。

但是，我必须使用此表单的引导程序。 Bootstrap输入如下所示：

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

如何应用Bootstrap样式（FormGroup组件）但仍使用redux-form中的“Field”？

Answer 1

您可以使用包含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}
/>

以下是解释React中无状态组件的nice article。

Answer 2

我建议使用返回组件的无状态函数。

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

例如

import sys

print sys.argv[1][int(sys.argv[2]):]

如何使用Bootstrap的redux格式宽度“字段”

2 个答案: