使用material-ui以redux-form提交表单时获取空数组答案

【问题标题】：Getting an empty array while submitting form in redux-form with material-ui使用material-ui以redux-form提交表单时获取空数组
【发布时间】：2017-05-20 17:54:03
【问题描述】：

我正在使用redux-form 和material-ui 讨论here

我的代码如下

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}/>
   ...
}

但是，当我单击提交按钮时，我在 loginUser 函数控制台中得到一个空对象。

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

我正在使用redux-form v6.7.0

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

感谢您的帮助

【问题讨论】：

标签： reactjs material-ui redux-form

【解决方案1】：

引用的 redux-form 文档指向版本 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 的道具需要以不同的方式传递。 renderTextField 的正确方法是这样的

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

6.7.0 版本的文档是 here。

【讨论】：