React 动态增减表单项-数组操作

在操作表单动态增减表单项时,表单的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>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇