我正在尝试使用" redux-form":" ^ 6.7.0"与" react-bootstrap":" ^ 0.31.0"
我的组件渲染很好,但是当我按下提交时,我看到的是一个空对象。
注意:我已经尝试首先使用connect包装Config,如下所示,先使用redux-form包装,然后使用from react-redux connect()
Configuration.js
vgat_initialized
reducers.js
.bss
主程序包 Dashboard.js
我在调试器中看到的是config是一个空对象
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
答案 0 :(得分:7)
请参阅:https://github.com/erikras/redux-form/issues/2917
哦,这是一个很大的谜。我遵循https://github.com/react-bootstrap/react-bootstrap/issues/2210中的建议,并且关于其他道具和空提交的警告都停止了。
看来你必须在自定义组件中包装Bootstrap(为什么?,我不知道)。还要确保自定义组件是无状态功能组件,或者在第一次按键后,您的字段将模糊并失去焦点。
有关此问题的redux-form文档中有一些警告。
我的自定义字段组件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的定义如下:
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>
答案 1 :(得分:7)
<FormControl>
所需的一些道具会从props.input
<Field>
内传递,http://redux-form.com/6.6.3/docs/api/Field.md/#props
要以通用方式传递所有这些道具,而不是明确地执行,您可以使用以下函数:
const ReduxFormControl = ({input, meta, ...props}) => {
return <FormControl {...props} {...input} />
};
然后在表单中:
<Field component={ReduxFormControl} ... />
这样,value,onChange等都按预期传递给<FormControl>
。