redux 表单 material ui 自动完成验证

Question

大家好。我正在使用关于 docs redux-form-material-ui 的 npm 模块 'redux-form-material-ui' 编写一个 React 应用程序而运行进入问题，如何验证自动完成组件。有正确的方法吗？

Answer 1

我已经通过自动完成验证进行了管理，但这不是最好的方法。因为我不得不编辑 redux-form/es/ConnectedField.js。问题是在自动完成字段上的 onBlur 之后，我传递给 <Field> 组件的事件未触发。我在 redux-form/es/ConnectedField.js 中发现 onBlur, onChange 和其他一些事件已被 redux-form 原生事件取代。我在 redux-form/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);
            }
        }
    }

现在 onBlur 传递给 <Field> 组件工作正常。但我希望 redux-form 的作者能解决这个问题或提出更好的解决方法

redux 表单 material ui 自动完成验证

redux form material ui autocomplete validation

reactjs

material-ui

redux-form

react-redux