带有进度条的 Redux 表单

Question

我需要一些帮助来弄清楚如何将进度条添加到我的 redux-form 以跟踪密码字段的进度。

我正在尝试使用呈现 material-ui 的 LinearProgress 的组件，但找不到 pass/access密码值。

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

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

this.state.completed应该是根据密码值计算出来的

如果有一个标准的方法来做这样的事情，我将不胜感激。

Answer 1

基本上你需要

访问 redux 存储中的密码值，并且
将该值传递给您的组件以计算某种复杂性分数

您应该使用 formValueSelector 来检索 mapStateToProps 中的值，然后将其作为 prop 传递给您的组件。示例：

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 {}

希望对您有所帮助！

带有进度条的 Redux 表单

Redux-form with a progress bar

progress-bar

reactjs

redux-form