コンポーネントのアクション onSelect をディスパッチして、別のドロップダウンに入力しようとしています。onFieldsChange コールバック スコープでは使用できないローカル変数を使用する必要があるため、antd の onFieldsChange オプションの代わりに onSelect イベント ハンドラを使用してそれを達成しました。
しかし、結果は - ディスパッチが呼び出され、コンポーネントが再レンダリングされた後、ドロップダウン要素は選択された値からクリアされ、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 プロパティを使用して値を設定しようとしました! しかし、ドロップダウン コンポーネントは再レンダリング時にクリアされます!
助けてください!!!!:|