material-uiで書式化されたredux-formのハンドルフォームの小道

Question

トークンを返すAPI呼び出しを行うログインフォームを作成しようとしています。 私は反応があり、還元するので、私はthis tutorialに従っています。

ログインフォームは還元型です。ここ コードである：

login.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Field, reduxForm } from 'redux-form'; 
import { loginUser } from '../../actions/index'; 

const form = reduxForm({ 
    form: 'login' 
}); 

class Login extends Component { 
    handleFormSubmit(formProps) { 
    this.props.loginUser(formProps); 
    } 

    renderAlert() { 
    if(this.props.errorMessage) { 
     return (
     <div> 
      <span><strong>Error!</strong> {this.props.errorMessage}</span> 
     </div> 
    ); 
    } 
    } 

    render() { 
    const { handleSubmit } = this.props; 

    return (
     <div> 
     <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
     {this.renderAlert()} 
     {/* {this.renderAlert.bind(this)} */} 
      <div> 
      <label>Username</label> 
      <Field name="username" component="input" type="text" /> 
      </div> 
      <div> 
      <label>Password</label> 
      <Field name="password" component="input" type="password" /> 
      </div> 
      <button type="submit">Login</button> 
     </form> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    errorMessage: state.auth.error, 
    message: state.auth.message 
    }; 
} 

export default connect(mapStateToProps, { loginUser })(form(Login)); 

フォームが送信されると、小道具（{ユーザー名、パスワードを}）HandleFormSubmitに渡され、その後、ReduxのあるloginUser関数にログインAPIを呼び出すために作成されたアクション。 これは完璧に機能しましたが、今ではフォームのフィールドを定型化するためにマテリアルUIを統合しようとしています。この変更に伴い

// input basic version 
<Field name="username" component="input" type="text" /> 
// material-ui version 
<Field name="username" component={TextField} type="text" /> 

小道具のユーザ名とパスワードがhandleFormSubmit関数に渡されていないので、私は、ユーザーがログインするための正しいAPI呼び出しを実現することはできません。 この問題を解決するには、あなたの助けが必要です。

Answer 1

redux-formが提供するmaterial-uiコンポーネントから変換レイヤーを導入する必要があります。これはredux-form文書hereに記載されています。

TextFieldにとって、これは次のようになります。

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

が次にあなたが Fieldにコンポーネントとしてこれを渡します

<Field name="username" component={renderTextField} /> 

既にラッパーのほとんどを持っている図書館もありますredux-form-material-uiと同様に、importとして使用する必要があります。