无法以redux格式更新onBlur中的表单

时间:2017-12-11 22:47:39

标签: reactjs redux-form

我有一个字段&:not(:last-child):after,用户输入内容并在每个用户击键上显示一个下拉列表,其中包含数组AskQuestions中的更新结果。但是,当用户点击某个字段时,我会尝试通过companyOptions清除当前字段的值,但这似乎不可能。

this.props.dispatch(change..))

这是我的renderField

<Field
  name="company"
  type="text"
  onBlur={this.onClearSearch}
  keyUp={this.renderCompanyList}
  component={renderField}
  label="Choose Company..."/>

我有以下回调关联,但this.props.dispatch不会重置该字段。

 function renderField(field) {
    const { meta: {touched, error} } = field;
    return(
    <div>
      <input type={field.type}
             placeholder={field.label}
             onKeyUp={field.keyUp ? () => {field.keyUp(field.input.value)} : ""}
             onBlur={field.onBlur ? () =>{field.onBlur()} : ""}
             {...field.input}
             // I also tried putting in after ...input
             // onBlur={field.onBlur ? () =>{field.onBlur()} : ""}
           />
           <div className="text-danger">
             {touched ? error : ''}
           </div>
    </div>
  );
}

1 个答案:

答案 0 :(得分:2)

这是因为有一个默认事件onBlur在您的函数onClearSearch修改后修改了输入的值,

e.preventDefault()末尾添加onClearSearch必须解决您的问题,如下所示:

onClearSearch(e){
   const {companyOptions} = this.state;
   if (companyOptions.length){
     var company = companyOptions[0];
     this.props.dispatch(change('AskQuestion','company',company.label));
   }
   else {
     this.props.dispatch(change('AskQuestion','company',''));
   }
   // hides the dropdown view
   this.setState({showCompanySearch:false})
   // here
   e.preventDefault();
}

More info here

我希望这可以帮到你