我的表单中有这个组件:
<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”?
最佳答案
您可以使用包含 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 中的无状态组件。
关于javascript - 如何通过 Bootstrap 使用 redux 表单宽度 "Field",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43504261/