Reactjs redux表单材质ui自动完成验证

大家好。 我正在使用npm模块“redux form material ui”编写一个关于

---

遇到了如何验证自动完成组件的问题。有正确的方法吗？

我已经使用了自动完成验证，但这不是最好的方法。因为我必须编辑redux表单/es/ConnectedField.js。 问题是在自动完成字段上的

onBlur

之后发生了一个未触发的事件，我将该事件传递给

组件。我在

redux表单/es/ConnectedField.js

中发现

onBlur、onChange

和一些其他事件被

redux表单

本机事件替换。 我在

redux表单/es/ConnectedField.js

        if (withRef) {
          custom.ref = 'renderedComponent';
        }

        // my changes
        if (onBlur) {
            custom.onBlur = onBlur;
        }
        // end my changes

        if (typeof component === 'string') {
          var input = props.input,
              meta = props.meta; // eslint-disable-line no-unused-vars

这是我的客户代码：

  import React, {Component, PropTypes} from 'react'
    import { Field } from 'redux-form'

    import TextField from 'material-ui/TextField'
    import { AutoComplete as MUIAutoComplete } from 'material-ui'
    import { AutoComplete, Checkbox } from 'redux-form-material-ui'

    import validators from './../../validators/validators'
    import countries from './../../lists/countries'
    import BaseForm from './abstracts/BaseForm'

    import style from './../../css/forms.css' 
    import commonStyle from './../../css/common.css' 

    export default class RegistrationForm extends BaseForm 
    {
        constructor(props) {
            super(props)
        }

        render() {
            const {pristine, submitting, valid, handleSubmit, reset} = this.props;

            const fields = ([
                 <Field name="country_name" 
                       component={AutoComplete}
                       floatingLabelText="Country"
                       filter={MUIAutoComplete.fuzzyFilter}
                       maxSearchResults={15}
                       dataSourceConfig={{
                           text: 'name',
                           value: 'code',
                       }}
                       dataSource={countries.getData()}
                       normalize={this.normalizeCountry}
                       validate={[
                           validators.required,
                           validators.byCountryCode(countries),
                       ]}
                       ref="countryName"
                       withRef
                       onBlur={this.validateCountry.bind(this)}
                 />,
                <div>
                    <button type="submit" 
                            disabled={!valid}
                            className={valid ? '' : commonStyle['disabled']}
                        >Submit</button>
                    <button type="button"
                            disabled={pristine || submitting}
                            className={
                                pristine || submitting ? commonStyle['disabled'] : ''
                            }
                            onClick={reset}
                    >Reset</button>
                </div>,
            ])

            return (
                <form onSubmit={handleSubmit}>
                    {fields.map((node, key) => (
                        <div key={key} className={style['form-row']}>
                            {node}
                        </div> 
                    ))}
                </form>
            )
        }

        validateCountry(event) {
            let value = this.refs
                           .countryName
                           .getRenderedComponent()
                           .getRenderedComponent()
                           .refs
                           .searchTextField
                           .input
                           .value;

            let code = countries.getCode(value);

            if (!code) {
                this.props.blur('country_name', value);
            } else {
                this.props.change('country_name', code);
            }
        }
    }

import React，{Component，PropTypes}来自“React”
从“redux表单”导入{Field}
从“物料界面/文本字段”导入文本字段
从“物料ui”导入{AutoComplete as muiautomlete}
从“redux表单材质ui”导入{AutoComplete，Checkbox}
从“/../../validators/validators”导入验证程序
从“/../../lists/countries”导入国家/地区
从“./abstracts/BaseForm”导入BaseForm
从“./../../css/forms.css”导入样式
从“/../../css/common.css”导入commonStyle
导出默认类注册表单扩展BaseForm
{
建造师（道具）{
超级（道具）
}
render（）{
const{pristine，submiting，valid，handleSubmit，reset}=this.props；
常量字段=([
,
提交
重置
,
])
返回(
{fields.map（（节点，键）=>(
{node}
))}
)
}
validateCountry（事件）{
设value=this.refs
.国名
.getRenderedComponent（）文件
.getRenderedComponent（）文件
参考文献
.searchTextField
.输入
价值
让code=countries.getCode（值）；
如果（！代码）{
this.props.blur（'country\u name'，value）；
}否则{
此.props.change（'国家/地区名称'，代码）；
}
}
}

---

现在，传递给

组件的

onBlur

工作正常。但我希望redux表单的作者能够解决这个问题，或者提出更好的解决方法

您能提供一些代码吗？