0

我有一个带有反应选择的 redux-form。预期的行为是，当我在选择字段中键入时，我调用了 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))
  }
})
4

1 回答 1

0

通过您的代码，我注意到您定义的自定义方法getArtist未绑定到您的 React 上下文，因此props将是未定义的。两种可能的方法是：

constructor1）在方法中绑定它

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

2）或者，将其绑定在 Select 组件中（不理想）

onInputChange={this.getArtist.bind(this)}
于 2017-06-20T09:38:18.207 回答