【React】antd Modal弹框中select选择

Z时代
2024-01-10
分类：技术分享

【React】antd Modal弹框中select选择
第一次弹框

【React】antd Modal弹框中select选择
第二次弹框

如图所示，我点开弹框之后选择“所属渠道”，对应的“渠道编码”填到后边的框中

不知道为什么第二次第三次..第N次弹框我选择“所属渠道”，“渠道编码”出来之后，select选中的值不展示，有时候渠道编码的值也会没有只有第一次才是正常的

开始我想可能是弹出框脏数据的锅可是我加上弹出框的key值之后数据是显示正常了但是这个问题仍然存在

this.state = {
visible: false,
visibleKey:0,
channelId:"",
};
showModal = () => {
this.props.clearData();
this.props.dataId(this.props.id);
this.setState({
visible: true,
visibleKey: this.state.visibleKey+1,
});
};
<Modal
title="上架"
width={1000}
visible={this.state.visible}
onOk={this.handleOk.bind(this)}
onCancel={this.handleCancel}
key={this.state.visibleKey}
>
...</Modal>

<Col span="8">
<FormItem {...formItemLayout}  label="所属渠道" >
{getFieldDecorator('channelId', {
initialValue:goodsDataRow.channelId,
//rules: [{ message: '请填写所属渠道！'}],
})(
<Select onSelect={this.handleSelect.bind(this)}>
{this.props.channel.map((item,index)=>{
return(
<Option key={index} value={item.id}>{item.name}</Option>
)
})}
</Select>
)}
</FormItem>
</Col>
<Col span="8">
<FormItem {...formItemLayout}  label="渠道编码" >
{getFieldDecorator('channelCode', {
//initialValue:this.props.channelCode,
})(<Input />)}
</FormItem>
</Col>
handleSelect = (value, option) =>{
this.setState({
channelId:value,
});
this.props.validatePutaway(value,this.props.id);
this.props.selectChannelByDetail({id:value},this.getChannelCode);
};
getChannelCode = (value) =>{
this.props.form.setFieldsValue({"channelCode":value});
};