视频链接：https://www.bilibili.com/video/av78415119

需求：

业务、金额、卡号等是必填项；

输入框 宽度不完全相同；

业务为选择框，当选择‘续卡’时，‘导购员’不能输入；

卡号、姓名、手机后面需要加搜索，后续可以通过输入某一个，再点击搜索，自动补全其他两项。

 

补充功能：

打开表单，点击‘保存’，需要拿到这些数据。（绑定）

 

双向绑定数据：

注意，getFieldDecorator只能单层处理一个组件

        const {
            getFieldDecorator
        } = this.props.form;

                        <Form.Item label="卡号" {...styles.my_card}>
                            <Row gutter={20}>
                                <Col span={22}>
                                    {getFieldDecorator('card_number', {
                                    rules: [{required: true, message:"请填写卡号！"}]
                                    })(
                                        <Input placeholder="" item="card_number" onChange={this.handleTextChange}/> 
                                    )}
                                </Col>
                                <Col span={2}>
                                    <Button shape="circle" icon="search" onClick={this.handleSearch}/>
                                </Col>
                            </Row>
                            
                        </Form.Item>

末尾代码：

const InfoDialogForm = Form.create({ 
    name: 'information_dialog'
})(InfoDialog);

export default InfoDialogForm;

点击‘保存’后：

    handleOK = ()=>{
        this.props.form.validateFields((err,values)=>{
            if(err){
                message.error('表单数据有误，请根据提示填写！')
            }else{
                console.log("填写正确！");
                console.log(values);
                this.setState({
                    visible: false,
                });
            }
        })
    }

显示结果：

 

 

资料：

Select选择器：https://ant.design/components/select-cn/

Form表单：https://ant.design/components/form-cn/

Antd之三元表达式判断代码备忘  https://blog.csdn.net/qq_33733970/article/details/80074795

 

因为代码比较多，所以就不全贴在这里了。可以进qq群查看，

或则GitHub：https://github.com/JizhiXiang/Learn-react-flask-from-zero

另外有视频教程：https://space.bilibili.com/51723516

不定期更新。