有没有办法使用reduxForm V7从容器内部访问Reduce-form错误？

Question

以前，在Redux-Form V5中，我从render函数内部访问错误email.error和password.error。

在V7中，我的CSS是给我的悲伤做这种方式：通过renderInput()

const renderInput = (field) => { 
    const { meta: { touched, error } } = field 

    return (
     <div> 
      <input type={field.type} placeholder={field.placeholder} {...field.input} /> 
      <div className="inputErrorText"> 
       {touched ? error : ''} // this doesnt work due to my CSS 
      </div> 
     </div> 
    ) 
} 

// ...inside the Container: 

<div className="ui left icon input"> 
    <i className="user icon"></i> 
    <Field 
     name="email" 
     component={renderInput} 
     type="text" 
     placeholder="Enter your Email" 
    /> 
</div> 

// Below is the old way I was doing it 
{/*email.touched && email.error && <div className="inputErrorText">{email.error}</div>*/} 

如果我渲染错误，CSS被错位由于看起来像一些相对+位置的绝对理由，所以我需要在上面的代码底部显示最后一个div的错误。

如何处理在renderInput()之外和/或<form>其他地方渲染字段错误。我认为我的问题围绕renderInput()的输入参数field。如何在容器中访问它？是否可以在this.props的任何地方使用？

Answer 1

我刚刚得到它的工作。我发现这个来源：Redux-form 6.0.0 access error outside Field component它说明了使用还原形式V6的Fields组件的方法7.

我无法如图所示那样工作。我不完全确定在这一点上，但它是投掷各种“cannot read property touched of undefined”。我尝试了if（！fields）return else destructure，以及大约20种不同组合的很多组合，我只是无法通过使用Object.keys()来迭代它。我能够轻松地安慰日志fields.email.input并查看所有内容，但只要我开始深入探索meta，即使它有时会记录值，它也会开始抛出未定义。奇怪的是untouched总是false而不是undefined，所以它相当令人气愤，但我离题了。

另一个人可能有更多的运气与上述解决方案。 Fields绝对是一个人想要用来控制Redux形式V6-7中的错误。

我也不过，让它像这样的工作：

import { reduxForm, Field, Fields } from 'redux-form' 

const fieldNames = [ 
    'email', 
    'password' 
] 

const renderInput = (field) => { 
    return (
     <input type={field.type} placeholder={field.placeholder} {...field.input} /> 
    ) 
} 

// inside the Container (class methods) 
renderEmailError({ email }) { 
    const { touched, error } = email.meta 
    if (touched && error) return <div className="inputErrorText">{error}</div> 
    return null 
} 

renderPasswordError({ password }) { 
    const { touched, error } = password.meta 
    if (touched && error) return <div className="inputErrorText">{error}</div> 
    return null 
} 

// Inside render function 
<div className="field"> 
    <div className="ui left icon input"> 
     <i className="user icon"></i> 
     <Field 
      name="email" 
      component={renderInput} 
      type="text" 
      placeholder="Enter your Email" 
     /> 
    </div> 
    <Fields names={fieldNames} component={this.renderEmailError} /> 
</div> 

X

我是不是能够得到它与“标准”的实施使用Field，因为我的CSS简单地做工作不允许将div与输入一起放置。我无法改变CSS，因为它将图标放在输入字段的顶部。

我尝试将整个'fieldset'移动到renderInput()函数中，但当您单击眼球以显示密码（UX替代passwordConfirm字段）时，由于onClick处理程序，我变得同样卡住了。我无法从课堂外更新组件状态，也不能从课堂外正确调用该功能。

此外，笔者还了解到，如果是密码使用document.querySelector('input').type，因为它是一个安全隐患，你不能操纵输入的类型。