react&antd问题（4）

react&antd问题（4）

在工作中遇到一个需求是批量输入订单id，然后把这个订单id的数组传过去给后端
思路：点击批量查询后弹出一个模态框，然后通过换行输入多个id，点击查询后把订单数组通过post请求发给后端

//首先我们用一个按钮来控制批量查询模态框是否显示
<Button
  onClick={() => { this.ShowModal() }}
  type="primary"
  icon={<SearchOutlined />}
  shape="round"
  >
  批量查询
  </Button>
1
2
3
4
5
6
7
8
9

 ShowModal = () => {
    this.setState({
      visible: true
    })
  }
1
2
3
4
5

//这个是批量查询的模态框
	  <Modal
          title='批量查询'
          visible={this.state.visible}
          destroyOnClose={true}
          footer={null}
          onCancel={this.handleCancel}
        >
          <Form onFinish={this.handleOk} layout={'vertical'}>//onFinish是点击查询后单且数据验证成功后的回调事件
            <Form.Item name={['user', 'introduction']} label="输入订单(多个换行)">
              <Input.TextArea rows={8} cols={1} onChange={this.inputOrderid} value={this.state.text} allowClear />
            </Form.Item>
            <div style={{ color: 'rgba(0, 0, 0, 0.45)', textAlign: 'center' }}>{this.state.order_list.length}/200</div>
            <Form.Item style={{ textAlign: 'center' }}>
              <Button type="primary" htmlType='submit'>
                查询
              </Button>
            </Form.Item>
          </Form>
        </Modal>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20