在操作表单动态增减表单项时,表单的key是一个多维数组的key,如下
{this.state.transfer.map((item,i)=>(
<Form.Item label={false}>
{getFieldDecorator(`transfer[${i}][day]`, {
initialValue:this.state.transfer[i].day,
rules: [
{
required: true,
message: '输入流转剩余天数',
},
],
})(<Input placeholder="输入流转剩余天数" addonAfter="天" addonBefore="合约剩余" onChange={(e)=>{
let transfer = this.state.transfer
transfer[i].day = e.target.value
this.setState({transfer})
}}/>)}
</Form.Item>
))}
表单样式如下:
在动态删减项的时候报错:
Warning: You cannot set a form field before rendering a field associated with the value.
let transfer = [...this.state.transfer]
delTransfer=(i)=>{
let transfer = [...this.state.transfer]
transfer.splice(i,1)
this.setState({transfer})
const { form:{getFieldValue,setFieldsValue} } = this.props;
let data = getFieldValue('transfer')
data.splice(i,1)
setFieldsValue({
transfer:data
})
};
解决方法:使用变量语法
setFieldsValue({
[`transfer[${i}][day]`]:item.day,
[`transfer[${i}][price]`]:item.price
})
delTransfer=(i)=>{
let transfer = [...this.state.transfer]
transfer.splice(i,1)
this.setState({transfer})
const { form:{getFieldValue,setFieldsValue} } = this.props;
let data = getFieldValue('transfer')
data.splice(i,1)
// 修改代码如下
data.map((item,i)=>{
setFieldsValue({
[`transfer[${i}][day]`]:item.day,
[`transfer[${i}][price]`]:item.price
})
})
};
源代码如下:
//合约期限设置
add = () => {
let deadline = [...this.state.deadline]
deadline.push({day:null,add_hashrate:null,is_buy:false});
this.setState({deadline:deadline});
};
delButton=(i)=>{
let deadline = [...this.state.deadline]
deadline.splice(i,1)
this.setState({deadline})
const { form:{getFieldsValue,setFieldsValue} } = this.props;
let data = getFieldsValue(['day','add_hashrate','is_buy'])
data.day.splice(i,1)
data.add_hashrate.splice(i,1)
data.is_buy.splice(i,1)
setFieldsValue({
day:data.day,
add_hashrate:data.add_hashrate,
is_buy:data.is_buy,
})
};
//流转建议设置
addTransfer = () => {
let transfer = [...this.state.transfer]
transfer.push({day:null,price:null});
this.setState({transfer:transfer});
};
delTransfer=(i)=>{
let transfer = [...this.state.transfer]
transfer.splice(i,1)
this.setState({transfer})
const { form:{getFieldValue,setFieldsValue} } = this.props;
let data = getFieldValue('transfer')
data.splice(i,1)
data.map((item,i)=>{
setFieldsValue({
[`transfer[${i}][day]`]:item.day,
[`transfer[${i}][price]`]:item.price
})
})
};
<Form.Item label="增值服务"/>
{this.state.deadline.map((item,i)=>(
<Row span={24} key={i}>
<Col span={4}>
<Form.Item label={false}>
{getFieldDecorator(`day[${i}]`, {
initialValue:this.state.deadline[i].day,
rules: [
{
required: true,
message: '输入天数',
},
],
})(<Input placeholder="输入天数" addonAfter="天" onChange={(e)=>{
let deadline = this.state.deadline
deadline[i].day = e.target.value
this.setState({deadline})
}}/>)}
</Form.Item>
</Col>
<Col span={4}>
<Form.Item label={false}>
{getFieldDecorator(`add_hashrate[${i}]`, {
initialValue:this.state.deadline[i].add_hashrate,
rules: [
{
required: true,
message: '输入增值服务',
},
],
})(<Input placeholder="输入增值服务" addonAfter="%" onChange={(e)=>{
let deadline = this.state.deadline
deadline[i].add_hashrate = e.target.value
this.setState({deadline})
}}/>)}
</Form.Item>
</Col>
<Col span={4}>
<Form.Item label={false} style={{marginLeft:2}}>
{getFieldDecorator(`is_buy[${i}]`, {
initialValue: this.state.deadline[i].is_buy == true ? true : false,
valuePropName: 'checked'
})(<Switch checkedChildren="前端开启" unCheckedChildren="前端关闭" onChange={(value)=>{
let deadline = this.state.deadline
deadline[i].is_buy = value
this.setState({deadline})
}}/>)}
</Form.Item>
</Col>
<Col span={4}>
<Form.Item label={false}><Button type="primary" onClick={()=>this.delButton(i)}>-</Button></Form.Item>
</Col>
</Row>
))}
<Form.Item >
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
<Icon type="plus" /> 添加合约期限
</Button>
</Form.Item>
<Form.Item label="流转建议价格"/>
{this.state.transfer.map((item,i)=>(
<Row span={24} key={i}>
<Col span={4}>
<Form.Item label={false}>
{getFieldDecorator(`transfer[${i}][day]`, {
initialValue:this.state.transfer[i].day,
rules: [
{
required: true,
message: '输入流转剩余天数',
},
],
})(<Input placeholder="输入流转剩余天数" addonAfter="天" addonBefore="合约剩余" onChange={(e)=>{
let transfer = this.state.transfer
transfer[i].day = e.target.value
this.setState({transfer})
}}/>)}
</Form.Item>
</Col>
<Col span={4}>
<Form.Item label={false}>
{getFieldDecorator(`transfer[${i}][price]`, {
initialValue:this.state.transfer[i].price,
rules: [
{
required: true,
message: '输入建议单价',
},
],
})(<Input placeholder="输入建议单价" addonAfter="元" onChange={(e)=>{
let transfer = this.state.transfer
transfer[i].price = e.target.value
this.setState({transfer})
}}/>)}
</Form.Item>
</Col>
<Col span={4}>
<Form.Item label={false}><Button type="primary" onClick={()=>this.delTransfer(i)}>-</Button></Form.Item>
</Col>
</Row>
))}
<Form.Item >
<Button type="dashed" onClick={this.addTransfer} style={{ width: '60%' }}>
<Icon type="plus" /> 添加流转建议价格
</Button>
</Form.Item>