還原形式和反應選擇與選項顯示爲用戶類型

Question

我有一個redux形式與反應選擇。預期的行爲是，當我在select字段中輸入時，我調用了redux動作（通過使用OnInputChange）。但我不知道該如何調用這個動作。調用操作的行會在下面的代碼片段中進行註釋，因爲它失敗（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

通過您的代碼去，我注意到，你定義的自定義方法，getArtist未綁定到您的陣營上下文，以便props是不確定的。此兩種可能的方法是：將其綁定

1）在constructor方法

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

2）可替換地，將其綁定在選擇部件（未理想壽'）

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