Редукционная форма материала UI Проверка автозаполнения

Question

Привет всему сообществу. Я пишу приложение реагирования с использованием модуля npm 'redux-form-material-ui' относительно http://erikras.github.io/redux-form-material-ui/ И столкнулся с проблемой, как проверить компонент автозаполнения. Есть ли правильный способ сделать это?

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 исправит эту проблему или предложит лучший способ ее решения.