redux-formと反応して選択します。ユーザータイプとして表示されるオプションを使用します。

Question

私は反応選択で還元型を持っています。予想される動作は、selectフィールドに入力すると、（OnInputChangeを使用して）reduxアクションを呼び出すことです。しかし、私はその行動を呼び出す方法を知らない。アクションを呼び出す行は、失敗するため、下のスニペットでコメントされています（this.props.getArtistSearch(value)）。どのように適切にアクションを呼び出すのアイデアは、ユーザーの入力として？あなたのコードを通って行く

class FormApplication extends React.Component { 
     submit(values) { 
     this.props.submitForm(values) 
     } 
     getArtist(value){ 
     //this.props.getArtistSearch(value) --> props is undefined 
     console.log(value) 
     } 
     render() { 
     const { handleSubmit } = this.props 

    return (
     <form className='content text padding-top-0' onSubmit={handleSubmit(this.submit.bind(this))}> 
     <div className='row adjust-form-row'> 

      <div className='col-md-6 last-lineup'> 
      <div className='row adjust-form-row'> 
       <div className='col-md-6'> 
       <div className='form-group'> 
        <Field 
        name='dl_artistname' 
        options={this.props.gap.artistSearch} 
        component={props => (
         <Select 
         {...props} 
         name={props.name} 
         onInputChange={this.getArtist} 
         onChange={(value) => { 
          this.props.requestArtistInstance({id: value.dl_artistid }) 
          return props.input.onChange(value != null ? value.dl_artistid : null)} 
         } 
         onBlur={() => props.input.onBlur(props.input.value)} 
         options={props.options} 
         //loadOptions={getOptions} 
         clearable={false} 
         cache={false} 
         backspaceRemoves={false} 
         valueKey='dl_artistid' 
         labelKey='dl_name' 
         value={props.input.value || ''} 
         isLoading={false} 
         disabled={false} 
         /> 
        )} 
        /> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 

     </form> 
    ) 
    } 
} 

const mapDispatchToProps = dispatch => ({ 
    getArtistSearch: (text) => { 
    dispatch(getArtistSearch(text)) 
    }, 
    submitForm: (values) => { 
    dispatch(submitForm(values)) 
    } 
}) 

Answer 1

、私はそうpropsは未定義になりますあなたが定義したカスタムメソッド、getArtistがあなたのリアクトコンテキストにバインドされていなかったことに気づきました。これには二つの可能なアプローチは、以下のとおりです。

1）バインドconstructor方法

constructor(){ 
super(); 
this.getArtist = this.getArtist.bind(this); 
} 

2）でまた、選択コンポーネント（未理想的なカントー '）

onInputChange={this.getArtist.bind(this)}