レデュックスフォーム素材uiオートコンプリート検証

Question

こんにちはコミュニティ全体。 docs redux-form-material-ui に関連するnpmモジュール 'redux-form-material-ui'を使用して反応アプリを作成しています。問題をどのように自動補完コンポーネントを検証するかについて調べました。それを行う正しい方法はありますか？

Answer 1

私はオートコンプリート検証で管理していますが、これは最善の方法ではありません。私はredux-form/es/ConnectedField.jsを編集しなければならなかったからです。 オートコンプリートフィールドのonBlurの後に問題が発生しました。このイベントはトリガーされず、<Field>コンポーネントに渡されました。私はredux-form/es/ConnectedField.jsにonBlur, onChange、それ以外のイベントはredux-formのネイティブイベントで置き換えられました。

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); 
      } 
     } 
    } 

正常に動作します<Field>コンポーネントに渡さ今onBlur時： 私は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 

にいくつかのコードを追加して、これは私のクライアントコードです。しかし、私はredux形式の著者がこの問題を解決するか、よりよい解決策を提案することを願っています。