2017-06-14 17 views
0

我正在尝试分派选择某个组件的操作以填充另一个下拉列表。我使用onSelect事件处理程序来实现,而不是使用antd的onFieldsChange选项,因为我需要使用onFieldsChange回调作用域中不可用的局部变量。reactJS | antd |在选择下拉菜单后维持重新呈现页面上的选择时面临的问题 - 这会触发分发

但结果是 - 调用调用并且组件被重新呈现后,下拉列表元素将清除其所选值,并重置为initialValue。我无法保留选择。下面的代码片段 -

    <FormItem {...formItemLayout} label={item.label}> 
 
         {getFieldDecorator(item.id, { 
 
          rules: [ 
 
           { required: required, message: errorText }, 
 
          ], 
 
          initialValue: initVal, 
 
          trigger: 'onSelect', 
 
         })(
 
          <Select style={{ width: '100%' }} onSelect={self.handleChange.bind(self,item)}> 
 
           { options } 
 
          </Select> 
 
         )} 
 
        </FormItem>

这里是handleChange回调ONSELECT -

public handleChange(item, val) { 
 
     console.log(item); 
 
     console.log('Current Value: ' + val); 
 
     let url = item.hasOwnProperty('urlOnSelect') ? item.urlOnSelect : null; 
 
     if (!url) { 
 
      return; 
 
     } 
 

 
     let params = item.hasOwnProperty('queryParams_S') ? item.queryParams_S : null; 
 
     let value; 
 

 
     if (params) { 
 
      url = url + '?'; 
 
      params.map(function(param) { 
 
       value = val; 
 
       if (url.indexOf('?') !== (url.length - 1)) { 
 
        url = url + '&'; 
 
       } 
 
       url = url + param.paramName + '=' + value; 
 
      }); 
 
     } 
 
     let fieldsToPopulateOnSelect = item.hasOwnProperty('fieldsToPopulateOnSelect') ? item.fieldsToPopulateOnSelect : null; 
 
     this.props.dispatch(fetchUrlOnSelect(this.profileKey, url, fieldsToPopulateOnSelect)); 
 
     this.props.form.setFields({ 
 
      [item.id]: { 
 
      value: val, 
 
      }, 
 
     }); 
 
    }

注:从上面可以看出,我甚至试过使用setFields属性在分派后立即设置值!但仍然下拉组件被重新渲染清除!

请帮忙!!!! :|

回答

0

由“下拉元素被清除其选择的价值”你的意思是原来的下拉菜单或新的下拉列表(要填充的人吗?)

我不认为你需要做的

this.props.form.setFields({ 
      [item.id]: { 
      value: val, 
      }, 
     }); 

,因为它是由antd处理,看到这个例子https://codepen.io/anon/pen/gRwyaa?editors=0010

+0

由“下拉元素被清除其选择的价值的”我的意思是原来的选择被清除..问题亘古不来,如果有被选择的一个下拉菜单。当我选择一个动作时,选择会被清除,这会导致组件重新渲染(清除选定的值)。 – SumalyaB

+0

如何创建一个演示项目 – Kossel

相关问题