如何在 React-Bootstrap 中使用 Redux-Form?

问题描述：

我正在尝试使用 "redux-form": "^6.7.0" 和 "react-bootstrap": "^0.31.0"

I am trying to use "redux-form": "^6.7.0" with "react-bootstrap": "^0.31.0"

我的组件渲染得很好，但是当我按下提交时，我看到的是一个空对象.

My Component renders nicely, but when I press Submit, what I see is an empty object.

注意:我尝试先用 connect 包装配置，如下所示，首先用 redux-form 包装它，然后用 from react-redux connect()

Configuration.js

class Config extends Component {
    render() {
        const { ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath, pickFile, pickFolder, handleSubmit } = this.props;
        return (
            <Form horizontal onSubmit={handleSubmit}>
                <FormGroup controlId="serverPortBox">
                    <Col componentClass={ControlLabel} sm={2}>Watson Port:</Col>
                    <Col sm={10}>
                        <OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}>
                            <Field name="WatsonPort" component={FormControl}
                                type="number" min="1024" max="65535" placeholder={ServerPort} />
                        </OverlayTrigger>
                    </Col>
                </FormGroup>

 ......

const CForm = reduxForm({
    form: 'configuration' // a unique name for this form
})(Config);

const Configuration = connect(mapStateToProps, mapDispatchToProps)(CForm)

export default Configuration

reducers.js

import { combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form

......

const reducerList = {
    GLVersion,
    ServerConfig,
    ServerStats,
    form: formReducer
}

export default combineReducers(reducerList)

主包Dashboard.js

我在调试器中看到的是 config 是一个空对象

    <Panel className='configPanel'
      collapsible header="Configuration"
      eventKey="1"
      defaultExpanded={true}>
      <Configuration onSubmit={(config) => writeConfig(config)} />
    </Panel>

答

参见:https://github.com/erikras/redux-form/issues/2917

哦，这是一个很大的谜团.我遵循了 https://github.com/react-bootstrap/react- 中的建议bootstrap/issues/2210 以及关于额外道具和空提交的警告都停止了.

Oh, this was a great mystery. I followed the advice in https://github.com/react-bootstrap/react-bootstrap/issues/2210 and both the warning about additional props and the empty submit stopped.

看来您必须将 Bootstrap 包装在您的自定义组件中(为什么?我不知道).还要确保您的自定义组件是无状态的功能组件，否则在第一次按键后，您的字段会模糊并失去焦点.

It seems you have to wrap the Bootstrap in your custom component (why?, I don't know). Also make sure you custom component is a stateless funcitonal component, or after the first key press, you field will blur and lose focus.

redux-form 的文档中对此有一些警告.

There are some warnings in the documentation of redux-form about this.

我的自定义字段组件 FieldInput

  const FieldInput = ({ input, meta, type, placeholder, min, max }) => {
        return (
            <FormControl
                type={type}
                placeholder={placeholder}
                min={min}
                max={max}
                value={input.value}
                onChange={input.onChange} />
        )
    }

我像这样调用它:

<Field name="ServerPort"
   type='number' 
   component={FieldInput} 
   placeholder={ServerPort} 
   min="1024" max="65535" 
/>

另见:https://github.com/erikras/redux-form/issues/1750

现在，FieldInput 和 Config 的定义是这样的:

So now, the definition of FieldInput and Config look like this:

import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
import * as Act from '../dash/actions.js'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'

const FieldInput = ({ input, meta, type, placeholder, min, max }) => {
    return (
        <FormControl
            type={type}
            placeholder={placeholder}
            min={min}
            max={max}
            value={input.value}
            onChange={input.onChange} />
    )
}

const Config = ({ ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath, pickFile, pickFolder, handleSubmit }) => {
    return (
        <Form horizontal onSubmit={handleSubmit}>
            <FormGroup controlId="serverPortBox">
                <Col componentClass={ControlLabel} sm={2}>Watson Port:</Col>
                <Col sm={10}>
                    <OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}>
                        <Field name="ServerPort" type='number' min="1024" max="65535" component={FieldInput} placeholder={ServerPort}  />
                    </OverlayTrigger>
                </Col>
            </FormGroup>

如何在 React-Bootstrap 中使用 Redux-Form?

相关推荐