我正在尝试使用"redux-form":"^6.7.0"和"react-bootstrap":"^0.31.0">
我的组件呈现得很好,但是当我按提交时,我看到的是一个空对象。
注意:我尝试先用connect包装配置,如下所示,首先用redux-form包装它,然后用from-react-redux connect((
配置.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
减速器.js
import { combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form
......
const reducerList = {
GLVersion,
ServerConfig,
ServerStats,
form: formReducer
}
export default combineReducers(reducerList)
主包仪表板.js
我在调试器中看到的是配置是一个空对象
<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 的建议,关于附加道具和空提交的警告都停止了。
似乎您必须将引导程序包装在自定义组件中(为什么?,我不知道(。还要确保自定义组件是无状态功能组件,否则在第一次按键后,您的字段将模糊并失去焦点。
在 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} />
)
}
我像这样调用它:
<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>
<FormControl>
需要的一些道具是从<Field>
传递到props.input
内部的,请参阅 http://redux-form.com/6.6.3/docs/api/Field.md/#props
要以通用方式传递所有这些 props,而不是显式地传递,您可以使用以下函数:
const ReduxFormControl = ({input, meta, ...props}) => {
return <FormControl {...props} {...input} />
};
然后在表单中:
<Field component={ReduxFormControl} ... />
这样,值、onChange 等都按预期传递给<FormControl>
。