Question

我有一个带有react-select的redux-form。预期的行为是，当我在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未绑定到您的React上下文，因此props将是未定义的。两种可能的方法是：

1）将其绑定在constructor方法

中

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

2）或者，将它绑定在Select组件（不理想的＆＃39;）

中

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

redux-form和react-select选项显示为用户类型

1 个答案: