使用 material-ui 以 redux 形式提交表单时获取空数组

Question

我将 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

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

感谢您的帮助

Answer 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.

使用 material-ui 以 redux 形式提交表单时获取空数组

Getting an empty array while submitting form in redux-form with material-ui

reactjs

material-ui

redux-form