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

但是，当我点击Submit按钮时，我在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-form形式提交表单时获取一个空数组

1 个答案: