進捗バー付きのReduxフォーム

Question

還元型に進捗バーを追加してパスワードフィールドの進捗状況を追跡する方法を知りたい場合は、何か助けが必要です。

material-uiのLinearProgressをレンダリングするコンポーネントを使用しようとしていますが、パスワード値を渡したりアクセスしたりする良い方法が見つかりません。

<Field ... 
     name="password" 
     type="password" 
     label={PASSWORD} 
     component={renderField} /> 

<LinearProgress 
     mode="determinate" 
     value={this.state.completed} /> 

ははパスワード値に基づいて計算されなければならないthis.state.completed。

このようなことを行う標準的な方法がある場合は、私はポインタを感謝します。

Answer 1

は、基本的には

1. アクセスReduxのストアのパスワード値を必要とし、あなたのコンポーネントに値
2. パスは、複雑さのいくつかの並べ替えを計算

あなたが使用する必要がありますスコアをformValueSelectorを使用してmapStateToPropsの値を取得し、それをコンポーネントの小道具として渡します。例：

import React, { Component } from 'react' 
import { formValueSelector, reduxForm, Field } from 'redux-form' 
import { connect } from 'react-redux' 

class MyForm extends Component { 
    computePasswordComplexityScore() { 
    // here you obviously compute whatever score you need 
    const score = doSomethingWith(this.props.currentPasswordValue) 
    return score 
    } 

    render() { 
    return (
     <Field ... 
     name="password" 
     type="password" 
     label={PASSWORD} 
     component={renderField} /> 

     <LinearProgress 
     mode="determinate" 
     value={ this.computePasswordComplexityScore() } /> 
    ) 
    } 
} 

const selector = formValueSelector('MyFormName') 

const mapStateToProps = state => { 
    const currentPasswordValue = selector('password') 
    return { currentPasswordValue } 
} 

@connect(mapStateToProps) 
@reduxForm({ form: 'MyFormName' }) 
export default class MyFormContainer extends MyForm {}