Question

我需要一些帮助来确定如何在 redux-form 中添加进度条以跟踪密码字段的进度。

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

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

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

应该根据密码值计算

this.state.completed 。

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

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

希望这有帮助！

带有进度条的Redux形式

1 个答案: