Redux-FormをReact-Bootstrapで使用する方法？

Question

私は「Reduxの形式」を使用しようとしています：「反応し、ブートストラップ」と「^ 6.7.0」：私が見たもの、「^ 0.31.0」

私のコンポーネントがきれいにレンダリングするが、私は送信]を押したときに空のオブジェクトです。

注：私は最初のReduxの形でそれをwraping、次いで反応-reduxが（接続からと、接続まず、以下のショーなどで構成包装しようとしている）

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

その設定が空のオブジェクトです私は、デバッガで見る

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

Answer 1

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

ああ、これは偉大な謎でした。 https://github.com/react-bootstrap/react-bootstrap/issues/2210のアドバイスに続き、追加の小道具に関する警告と空の送信が停止しました。

カスタムコンポーネントにブートストラップをラップする必要があるようです（理由は？、わかりません）。また、カスタムコンポーネントがステートレスファンクションコンポーネントであることを確認してください。最初のキーを押すと、フィールドがぼやけてフォーカスが失われます。

これについてredux-formのドキュメントにいくつかの警告があります。

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

が、私はこのようにそれを呼び出すFieldInput私のカスタムフィールドコンポーネント：

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

も参照してください。https://github.com/erikras/redux-form/issues/1750

だから今、FieldInputおよびコンフィグ表情の定義このように：

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> 

Answer 2

<FormControl>で必要とされるいくつかの小道具を<Field>からprops.inputの内側に渡されるには、代わりに明示的にそれを行うのは、次の機能を使用することができ、一般的な方法でこれらすべての小道具を渡すにはhttp://redux-form.com/6.6.3/docs/api/Field.md/#props

を参照してください。

const ReduxFormControl = ({input, meta, ...props}) => { 
    return <FormControl {...props} {...input} /> 
}; 

し、フォーム内部：

<Field component={ReduxFormControl} ... /> 

このように、値、のonChange、E tcはすべて期待通りに<FormControl>に渡されます。