带有进度条的 Redux-form答案

【问题标题】：Redux-form with a progress bar带有进度条的 Redux-form
【发布时间】：2017-03-26 14:51:31
【问题描述】：

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

我正在尝试使用渲染 material-ui 的 LinearProgress 的组件，但找不到传递/访问密码值的好方法。

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

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

this.state.completed 应该根据密码值计算。

如果有一个标准的方法来做这样的事情，我会很感激一个指针。

【问题讨论】：

你能补充一下你到目前为止所涵盖的信息吗？
另外，你有验证功能吗？
是的，我有一个验证功能

标签： reactjs progress-bar redux-form

【解决方案1】：

基本上你需要

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

您应该使用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 {}

希望这会有所帮助！

【讨论】：