仅在两个字段都被触及后才进行 Redux 形式的密码验证

Question

目前在我的自定义组件上，我使用的 SFC 如下所示：

export const InputField = field => (
  <div>
    <TextField required={field.required} invalid={field.meta.touched && !!field.meta.error}
     label={field.label} {...field.input} type={field.type} />
    {field.meta.touched && !!field.meta.error && (<TextFieldHelperText persistent
    validationMsg>{field.meta.error}</TextFieldHelperText>)}
  </div>
);

（这里的TextField和TextFieldHelperText是有样式的组件）。

这对于只关心自己的文本输入来说都很好，但是在密码字段上，紧随其后的是密码确认字段我不希望该字段被标记为无效，直到密码确认字段是也感动了......但我不知道如何获得对密码确认字段的引用并基本上说：

invalid={field.meta.touched && otherField.meta.touched && !!field.meta.error}

我觉得我遗漏了一些明显的东西！

Answer 1

将两个字段包装到一个包装器组件中，使用父组件的状态来存储有关触摸字段的信息，并在验证可能时传递一个 prop。像这样

class PassFields extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      passTouched: false,
      passConfirmTouched: false,
    }
  }

  handlePassFocus = (e) => {
    this.setState({ passTouched: true })
  }

  handlePassConfirmFocus = (e) => {
    this.setState({ passConfirmTouched: true })
  }

  render() {
    const canBeValidated = this.state.passTouched && this.state.passConfirmTouched
    return (
        <div className="form">
            <PassField
                {...this.props}
                onFocus={this.handlePassFocus}
                canBeValidated={canBeValidated}
            />
            <PassConfirmField
                {...this.props}
                onFocus={this.handlePassConfirmFocus}
                canBeValidated={canBeValidated}
            />
        </div>
    )
  }
}

你现在可以使用这样的东西了

<TextField 
  required={field.required} 
  invalid={field.canBeValidated && !!field.meta.error}
  onFocus={field.onFocus}
...

仅在两个字段都被触及后才进行 Redux 形式的密码验证

Redux-form password validation only after both fields touched

reactjs

redux-form

react-redux

react-redux-form