在使用材料 ui 以 redux-form 提交表单时获取空数组

Question

我正在使用redux-formmaterial-ui，如此处所述

我的代码如下

import React from 'react';
import { Field, reduxForm } from 'redux-form';  
import TextField from 'material-ui/TextField'
import {Button} from 'react-bootstrap'
const renderTextField = props => (
<TextField hintText={props.label}
floatingLabelText={props.label}
errorText={props.touched && props.error}
{...props}
/>
)
let LoginForm = (props) => {
return (
<form onSubmit={props.handleSubmit}>
<div>
<Field name="loginEmail" component={renderTextField} type="email" label="Email Address"/>
</div>              
<div>
<Field name="loginPassword" component={renderTextField} type="password" label="Password"/>
</div>
<div>
<Button bsStyle="primary" type="submit">Login</Button>
</div>
</form>
)
}
export default reduxForm({
form: 'loginForm'
})(LoginForm)

从我的父组件中，我称之为

loginUser = (values) => {
console.log(values);
}
render() {
....
<LoginForm onSubmit={this.loginUser}/>
...
}

但是，当我单击"提交"按钮时，我在登录用户功能控制台中得到一个空对象。

我意识到，当我在 redux 表单中将component={renderTextField}更改为component="input"时，我在 loginUser 函数 onSubmit 中获取值。

我正在使用redux-form v6.7.0

如果您需要更多信息，请告诉我。

感谢您的任何帮助

Answer 1

引用的redux 表单文档指向一个版本6.0.0-rc.1而正在使用的版本是v6.7.0。呈现文本字段，如下所示

const renderTextField = props => (
<TextField hintText={props.label}
floatingLabelText={props.label}
errorText={props.touched && props.error}
{...props}
/>
)

正在发出警告

Warning: Unknown props `input`, `meta` on <input> tag. Remove these props from the element. For details, see 'https://../react-unknown-prop'
in input (created by TextField)
in div (created by TextField)
in TextField (created by renderTextField)
in renderTextField (created by ConnectedField)
in ConnectedField (created by Connect(ConnectedField))
in Connect(ConnectedField) (created by Field)
in Field (created by LoginForm)
in div (created by LoginForm)
in form (created by LoginForm)
in LoginForm (created by Form(LoginForm))

这表明需要以不同的方式传递到 TextField 的道具。渲染文本字段的正确方法是这样的

const renderTextField = ({input, label, meta: {touched, error}, ...custom}) => (
<TextField
style={{width: '80%'}}
hintText={label}
floatingLabelText={label}
errorText={touched && error}
{...input}
{...custom}
/>
)

此处提供了版本6.7.0的文档。